javascript

CHAPTER 8 ■ SCRIPTING CSS
Additionally, four CSS-only members come from the CSSStyleSheet interface:
cssRules
ownerRule
deleteRule()
insertRule()
Internet Explorer, of course, deviates from the DOM standard but not by much for StyleSheet.
Internet Explorer renames ownerNode, which refers to the or element for the style sheet, as
owningElement. For the other StyleSheet members, Internet Explorer abides by the DOM names.
On the other hand, Internet Explorer does not implement any members from CSSStyleSheet. But
don’t worry. There are Internet Explorer–only members that will enable us to muddle through. The ones
we will explore are as follows:
rules
imports
addRule()
addImport()
removeRule()
removeImport()
cssText
Things could be worse, you know. Internet Explorer deviating from DOM makes scripting style
sheets tough. But the proprietary workarounds make it doable. So, rather than feel sorry for ourselves,
let’s start moving forward in small steps.
Before we can query a rule, we need to get at the style sheet that contains the rule. One way is to
query the sheet member of a or element in Firefox, Safari, and Opera. Internet Explorer
deviates from DOM, no surprise, and implements a proprietary styleSheet member instead. With this in
mind, our first steps will be the following:
var myStyleSheet = document.getElementsByTagName("link")[0];
myStyleSheet = myStyleSheet.sheet || myStyleSheet.styleSheet;
Another, less reliable way to query a style sheet is by way of document.styleSheets, which contains
an array-like object with one member for every or element having a rel attribute value
set to "stylesheet". Internet Explorer and Opera also add one member for every or
element having a rel attribute value set to "alternate stylesheet". No browser adds imported style
sheets to document.styleSheets—just those included with a or embedded in a . Anyway,
we could rewrite the previous sample like so:
var myStyleSheet = document.styleSheets[0];
■ Note document.styleSheets is provided by the DocumentStyle interface. In turn, styleSheets contains an
array-like object provided by the StyleSheetList interface. Members contained by a StyleSheetList are objects
that have the features listed in the StyleSheet and CSSStyleSheet interfaces. So, there are four interfaces for
you to consult in a DOM reference.
Now myStyleSheet contains an object representing eight.css. Let’s find the rule for the blue class.
Where would that be? It’s in a cssRules member for Firefox, Safari, and Opera, but in a rules member for
321