disabling stylesheets to increase the speed of showing/hiding divs

Question

I read a great article: http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance

I quote its author:

"For fun, I thought, "What if instead of manipulating every DOM node and changing things, we just futz with the stylesheet?" Could there be speed improvements there? I mean, the methods benchmarked above are plenty fast for everyday use, but what if I had 10,000 nodes on a page I wanted to show and hide? It would be slow just selecting them all. But, if I could manipulate the stylesheet, I could avoid the entire overhead. Let me just tell you that way is fraught with peril.

There are, of course, cross browser issues when manipulating stylesheets, since jQuery doesn't abstract them away for you. First, I tried to see if I could append a style tag with the css class as a string using jQuery, but got inconsistent results across browsers. Then I tried creating the stylesheet node and class using JavaScript, but there were different APIs and it ended up being too slow to justify. So finally, forgoing an attempt to do this in a programmatic way, I ended up just writing a style tag with a class in the head of the document. It's far too slow to create the stylesheet programmatically, but if it's already there then it is trivial to give it an ID and use its disabled attribute.

HTML:

<style id="special_hide">.special_hide { display: none; }</style>
<!--  ...  -->
<div class="special_hide">Special hide DIV</div>

Then in javascript…

JavaScript:

$('#special_hide').attr('disabled, 'true');

and BAM, you just displayed all of your elements with a class of “special_hide”. To hide them all again, just do…

JavaScript:

$('#special_hide').attr('disabled', 'false');

and they are now all hidden. The total javascript processing time was 0-1ms across all browsers. The only javascript you are doing is changing an attribute. "

**My question is: How could I create a 'special_show' class where adding my divs to that class and then enabling that class shows them?

Something like

<style id="special_show">.special_show { display: default; }</style>

**

Answer 1

I'm gonna make a general answer, no characters limitation :)

So, you want to manipulate CSS Style of DOM elements (such as divs etc) without looping throught the elements (like $(".special_style").each()) to apply the style because it can consume lot of resources the more elements catched by the rule.

You can't use removeClass/addClass combo as it is DOM manipulation and you would need to use the previous loop.

This has already been answered and the solution is to use the insertRule and addRule methods. Please read the other answer, this topic is a duplicate.

Update:

1 This fiddle shows how you could manage to add dynamic CSS to your page ! Well, it's not that great because it's not externalized but yet it can do the stuff you wanna achieve !

$("#special_hide").append(".special_hide { display: none; }");

2 You can load a different CSS file $("head").append("<link rel='stylesheet' href='path/to/style.css' type='text/css' />");

Besides that, I can't tell you which one is the best, some will arg that modifying the head by adding stylesheet could be wrong, others will tell you that inline css is wrong ... Just make up your mind about it by reading docs like w3c !