Changing external style
sheets using the DOM
Most of us are familiar with manipulating an element's inline style by
accessing its "style" object. There are times however, that you may find it
necessary to escalate the issue, and talk directly with the boss upstairs
that's the external style sheet on the page. Modifying an external style
sheet (style or link tag) is extremely powerful, yet should be noted is less
efficient and straightforward than going the route of dynamic inline styles.
With that declaration, lets begin!
 Key to the gate: the styleSheet object
The styleSheet object of the document contains all the
external style sheets on the page, either defined using the <style> or
<link rel="stylesheet"> tag: This is how we access external stylesheets in
the DOM. For example:
document.styleSheets[0] //access the first external style sheet on the page
document.styleSheets.length //returns the total # of external style sheets
Referencing a particular external style sheet on the page
Now, you may be wondering, "So how do I pick out and
reference a specific stylesheet out of numerous on the page? Since the
stylesheet[] array only supports reference by position, we can use a for
loop and scoop out the one we want. One way is to assign a title attribute
to the style sheet of interest (inside its <style> tag) for the purpose of
identifying it:
for (i=0; i<document.styleSheets.length; i++){
if (document.styleSheets[i].title=="Blue style") //if style sheet is titled "Blue style"
mycss=document.styleSheets[i] //mycss now contains the style sheet we're looking for
break;
}
Here I give the style sheet I wish to access on the page a
title attribute of "Blue style", so our script can easily pick it out from a
lineup.
It's time to look at the styleSheet object in detail now.
|
