Change CSS style of a class with javascript, but not in the DOM

Question

Let's assume we have lots of elements (see Live demo):

<div class="yes">Hello1</div>
<div class="yes">Hello2</div>
<div class="yes">Hello3</div>
<div class="yes">Hello4</div>
<div class="yes">Hello5</div>

with the same class called yes which has a simple CSS style :

.yes { color:red; }

Now I would like to change the style of the yes class.

Of course, we can change CSS style of this class with Javascript by using

var yesarray = document.querySelectorAll('.yes');

for (var i = 0, len = yesarray.length; i < len; i++) {
    yesarray[i].style.color = 'black';
}

(or even more easily with jQuery, with $('.yes').css(...) ...)

But then all these changes will be stored in the DOM :

enter image description here

This is not very elegant if I have lots of elements, that all these styles are "rendered in the DOM" like this.

Question:

How to change CSS style with Javascript such that the style change is not stored in the DOM, but modified in the loaded-in-memory CSS instead?

You're doing it the right way, it doesn't matter if the styles are inline. — adeneo
– adeneo, Commented Nov 8, 2014 at 14:51
@adeneo it does matter for me, because 1/ I can have thousands of such elements, 2/ Later I want to serialize the DOM structure. I find that having a thousand of inline styles is inelegant / increases the serialized data. — Basj
– Basj, Commented Nov 8, 2014 at 14:53
If you have thousands of elements and you're going to serialize the DOM structure, you're probably doing something else wrong, as that seems unnecessary. You can of course append a style tag to the head instead, but that's really even worse practice, even if it soves the issue of having styles on each element. — adeneo
– adeneo, Commented Nov 8, 2014 at 14:56
Can you create all your classes before-hand and simply use javascript to change the class instead of CSS properties?(to avoid inline styles) — Schmalzy
– Schmalzy, Commented Nov 8, 2014 at 14:56
that's what I was doing in the meantime, and I think it may solve the problem @Schmalzy :) . If you want to post as an answer, I'll accept it. — Basj
– Basj, Commented Nov 8, 2014 at 14:59

MrPk · Accepted Answer · 2014-11-08 15:04:50Z

4

You can't edit the CSS style page, but you can do something else.

You are doing in the right way but with a wrong approach.

You have to add ANTOHER style to each element with "yes" class. This style can be called in your example "approved"

So your jquery call will be:

EDIT: Schmalzy said correctly: $('.yes').addClass('approved');

equivalent of:

 $('.yes').each(){
  $(this).addClass('approved');
}

and previusly you declared in your stylesheet:

.approved {
 color: black
}

So in your page you will store classes (elegant and shorter) and not inline style.

edited Nov 8, 2014 at 15:04

answered Nov 8, 2014 at 14:57

MrPk

2,9502 gold badges22 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Schmalzy Over a year ago

No need for the .each() $('.yes').addClass('approved'); would do the same thing.

Pointy Over a year ago

No need to add a class to all the elements. Add a single class to the <body> tag and use a CSS descendant selector to enforce the rule.

Pointy · Accepted Answer · 2014-11-08 15:12:29Z

1

Instead of modifying every DOM node with class "yes", you can use the power of CSS descendant selectors to make the change a lot cheaper:

CSS:

.yes {
  color: blue; /* or whatever */
}

.approved .yes {
  color: black;
}

Then in JavaScript:

$("body").toggleClass("approved", shouldApprove());

Only one DOM node is updated (though, of course, the browser still has to recompute the layout of the whole page).

answered Nov 8, 2014 at 15:12

Pointy

415k62 gold badges600 silver badges631 bronze badges

Collectives™ on Stack Overflow

Change CSS style of a class with javascript, but not in the DOM

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related