↑
Main Page

selectorText

media

— A list of media types that can use the style sheet, as specified by the HTML

media

attribute. Internet Explorer incorrectly implements this property as a string containing the exact

contents of the

media

attribute.

ownerNode

— The DOM node specifying the style sheet (either a

<link/>

ele-

ment). Internet Explorer doesn’t support this property.

parentStyleSheet

— If the style sheet is included by the CSS

@import

statement, this points

to the style sheet in which the statement occurs.

title

— The title assigned to the style sheet by the HTML title attribute, which can be used on

both

<link/>

and

type

— The mime type of the style sheet; usually this is

text/css

for CSS.

Accessing the individual rules in a style sheet is a little bit tricky because of browser differences. The

DOM specifies a collection called

cssRules

for each style sheet, which contains all the CSS rules defined

in the style sheet. Mozilla and Safari correctly implement this standard, although Internet Explorer has

named the collection

rules

. Consequently, before working with rules in style sheets, you must use an

object detect to determine which collection name to use:

var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

Each rule contains a

selectorText

property that returns all the text for a CSS rule before an opening

curly brace. Recall the CSS rule from the previous example:

div.special {

background-color: red;

height: 10px;

width: 10px;

margin: 10px;

}

The

selectorText

property for this rule is

div.special

(although Internet Explorer actually capital-

izes all tag names, so it would be

DIV.special

Rules also contain a

style

property, which is a

style

object just like those found on elements. Therefore,

the previous example can be updated to report the correct background color by using the

style

object on

the CSS rule instead of the one on the

<div/>

itself:

<html>

<head>

<title>Accessing Style Sheets Example</title>

div.special {

background-color: red;

Opera doesn’t support JavaScript style sheet access or manipulation. Safari provides

limited support, but can’t access disabled style sheets those with the

rel

attribute

set to

“alternate stylesheet”

310

Chapter 10

13_579088 ch10.qxd 3/28/05 11:39 AM Page 310