March 11, 2008

CSSStyleRule DOM Object Helpers

"Totally PWN CSS with Javascript"

I found this article after realizing that EXT-JS's CSS class really was not what I wanted. There was some problem in the IE's (of course I forget now what it was). I found this guy Patrick Hunlock who writes some awesome code (I would suggest reading the article I linked to, and not stopping there). I like really clean-looking code, sorry Pat; so I cleaned it a bit and minimized it for you all.

Here is the file.
Here is the class api:


var CSS = {
[CSSStylerule] addCSSRule : function([selector]),
[CSSStylerule] getCSSRule : function([selector]),
[boolean] killCSSRule : function([selector])
};


So, when you say:

var pBold = CSS.addCSSRule('p.bold');

pBold will literally be a CSSStyleRule (as the DOM calls it). Furthermore to modify it:

pBold.style.fontWeight = 'bold';
pBold.style.fontSize = '115%';
Hunlock has even more examples on his original post; I also will urge you to Go Forth In Style!

No comments: