Modifying CSS class property values on the fly with JavaScript / jQuery

Contrary to some of the answers here, editing the stylesheet itself with Javascript is not only possible, but higher performance. Simply doing $('.myclass').css('color: red') will end up looping through every item matching the selector and individually setting the style attribute. This is really inefficient and if you have hundreds of elements, it’s going to cause problems.

Changing classes on the items is a better idea, but you still suffer from the same problem in that you’re changing an attribute on N items, which could be a large number. A better solution might be to change the class on one single parent item or a small number of parents and then hit the target items using the “Cascade” in css. This serves in most situations, but not all.

Sometimes you need to change the CSS of a lot of items to something dynamic, or there’s no good way for you to do so by hitting a small number of parents. Changing the stylesheet itself, or adding a small new one to override the existing css is an extremely efficient way to change the display of items. You’re only interacting with the DOM in one spot and the browser can handle deploying those changes really efficiently.

jss is one library that helps make it easier to directly edit the stylesheet from javascript.

Leave a Comment