Changing a javascript element style

It isn’t immediately obvious from your question, but eventually I twigged that NodeName="#text" means that you are dealing with a text node. This is not an element.

You cannot style text nodes directly. You can only style element nodes and have their styles affect the text inside them.


You mention <span class="price">, so presumably the text node is a child node of the span.

You can style (the first matching) span with that class using:

document.querySelector('span.price').style.someProperty = "someValue";

Or you could use querySelectorAll and loop over the resulting node list to style all the elements that match.


Since you mention styling the text node specifically if your question, then you might have a situation like:

<span> foo <i> bar </i> baz </span>

… where you want to style “foo” and “baz” differently to “bar”. To achieve that, you would usually style the span, and then override the styling for span i.

Alternatively, you might want to style foo without touching bar or baz. In this case, you need additional elements.

    <span> <span>foo</span> <i> bar </i> baz </span>

Now you can style span span.

Leave a Comment