Accessing Individual Style Sheets


document.styleSheets[0].disabled = true; 

When a page consists of more than one style sheet (<style> element with an inline style, or an external style sheet), you can use JavaScript to toggle between these style sheets, activate and deactivate them, and also combine them.

The styleSheets property of the document object contains all style sheets on the page, in the order in which they are loaded or appear on a page.

The most important property of every style sheet is disabled. If this is set to true, the style sheet becomes invisible and does not affect the layout of the page any longer.

There are two approaches to access a specific style sheet:

  • Using the ID of the style sheet as the index for the styleSheets array.

  • Using the number of the style sheet (starting at 0) as the index for the styleSheets array.

The former approach does not work well with Mozilla browsers, so you should use the numeric index, as the following code demonstrates:

Changing the Style Sheet (stylesheets.html)

<script language="JavaScript"   type="text/javascript"> function makeBold() {   document.styleSheets[0].disabled = false;   document.styleSheets[1].disabled = true;   window.setTimeout("makeLighter();", 1000); } function makeLighter() {   document.styleSheets[0].disabled = true;   document.styleSheets[1].disabled = false;   window.setTimeout("makeBold();", 1000); } window.onload = makeBold; </script> <style type="text/css" >   p { font-weight: bold; } </style> <style type="text/css" >   p { font-weight: lighter; } </style> <p>CSS and JavaScript</p> 




JavaScript Phrasebook(c) Essential Code and Commands
JavaScript Phrasebook
ISBN: 0672328801
EAN: 2147483647
Year: 2006
Pages: 178

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net