778 Part III ✦ Document Objects Reference client operating system, learning the common denominator of style sheet features is the right way to go. Details in this chapter cover all versions, so pay close atten- tion to compatibility listings for each item. One last compatibility note: While NN4 implements a fair amount of CSS, it does not expose style sheets or style rules to the object model. Part of this is linked to the static nature of an NN4 page. Because modifying a style may alter the physical layout of body elements, and because that browser does not reflow the page in response to such changes, altering styles of content that is already loaded is simply not possible. In NN6, however, the page reflows, and everything relating to styles is exposed to the scriptable object model. Making Sense of the Object Names The first task in this chapter is to clarify the seemingly overlapping terminology for the style sheet-related objects that you will be scripting. Some objects are more abstract than others, but they are all important. The objects in question are ✦ STYLE element object ✦ styleSheet object (a member of the styleSheets array) ✦ rule or cssRule object (a member of the rules or cssRules array) ✦ style object A STYLE element object is the object that represents the <STYLE> tag in your document. Most of its properties are inherited from the basic HTML element objects you see detailed in Chapter 15. While the STYLE element object has a disabled property, by and large, you won’t be accessing style sheets via the STYLE element object. A style sheet can be embedded in a document via the <STYLE> tag or it may be linked in via a <LINK> tag. One property of the document object, the styleSheets property, returns an array (collection) of all styleSheet objects that are currently “visible” to the document, whether or not they are disabled. Even though the <STYLE> tag, for example, contains lines of code that make up the rules for a style sheet, the STYLE element object is not the path to reach the individual rules. The styleSheet object is. It is through the styleSheet object that you can enable or dis- able an entire sheet, access individual rules (via the rules or cssRules property array), and add or delete rules for that style sheet. The meat of any style sheet is the rules that define how elements are to be ren- dered. At this object level, the terminology forks for IE4+ and NN6. The IE4+ object model calls each style sheet rule a rule object; NN6, adhering to the W3C DOM Level 2 standard, calls each rule a cssRule object. IE5 for the Macintosh supports both references to the same object. Despite the incompatible object names, the two objects share key property names. Assembling a reference to a rule requires array references. For example, the reference to the first rule of the first styleSheet object in the document is as follows for the two browsers: var oneRule = document.styleSheets[0].rules[0] // IE4+ var oneRule = document.styleSheets[0].cssRules[0] // IE5/Mac, NN6+ 779 Chapter 30 ✦ Style Sheet and Style Objects The last object of this quartet of style-related objects is the style object. This object is the motherlode, where actual style definitions take place. In earlier chap- ters, you have seen countless examples of modifying one or more style properties of an element. Most typically, this modification is accomplished through the style property of the HTML element. For example, you would set the font color of a SPAN element whose ID is “hot” as follows: document.all.hot.style.color = “red” // IE4+ document.getElementById(“hot”).style.color = “red” // IE5+, NN6+ The style object is also a property of a rule/cssRule object. Thus, if you need to modify the style of elements affected by an existing style sheet rule, you approach the style object through a different reference path, but the style object is treated just as it is for elements: document.styleSheets[0].rules[0].style.color = “red” // IE4+ document.styleSheets[0].cssRules[0].style.color = “red” // IE5/Mac, NN6+ Many scripters concern themselves solely with the style object, and at that, a style object associated with a particular element object. Rare are instances that require manipulation of styleSheet objects beyond perhaps enabling and disabling them under script control. Therefore, if you are learning about these objects for the first time, pay closest attention to the style object details rather than to the other related objects. Imported Style Sheets Style sheets embedded in a document via the STYLE element can import addi- tional style sheets via the @import selector: <STYLE TYPE=”text/css”> @import url(externalStyle.css); P {font-size:16pt} </STYLE> In this example scenario, the document sees just one styleSheet object. But that object has a style sheet nested inside — the style sheet defined by the external file. IE4+ calls one of these imported styles sheets an import object. An import object has all the properties of any styleSheet object, but its parentStyle property is a reference to the styleSheet that “owns” the @import rule. In fact, the @import statement does not even appear among the rules collection of the IE styleSheet object. Therefore, to access the first rule of the imported style sheet, the reference is as the following: document.styleSheets[0].imports[0].rules[0] The W3C DOM and NN6 treat import rule objects differently from the IE model. To the W3C DOM, even an at-rule is considered one of the cssRules collection of a styleSheet object. One of the properties of a cssRule object is type, which conveys an integer code value revealing whether the rule is a plain CSS rule or one of several other types, including an import rule. Of course, an imported rule object then has as one of its properties the styleSheet object that, in turn, contains the rules 780 Part III ✦ Document Objects Reference defined in the external style sheet file. The parent-child relationship exists here, as well, whereby the styleSheet that contains the @import rule is referenced by the imported styleSheet object’s parentStyle property (just as in IE4+). Reading Style Properties Both the IE4+ and NN6 (W3C) object models exhibit a behavior that at first glance may seem disconcerting. On the one hand, the W3C and good HTML practice encourage defining styles remotely (that is, embedded via <STYLE> or <LINK> tags) rather than as values assigned to the STYLE attribute of individual element tags throughout the document. This more closely adheres to the notion of separating style from content. On the other hand, object models can be very literal beasts. Strictly speaking, if an element object presents a scriptable property that reflects an attribute for that element’s tag, the first time a script tries to read that property, a value will be asso- ciated with that property only if the attribute is explicitly assigned in the HTML code. But if you assign style sheet settings via remote style sheets, the values are not explicitly set in the tag. Therefore, the style property of such an element comes up empty, even though the element is under the stylistic control of the remote style sheet. If all you want to do is assign a new value to a style property, that’s not a problem, because your assignment to the element object’s style prop- erty overrides whatever style is assigned to that property in the remote style sheet (and then that new value is subsequently readable from the style property). But if you want to see what the current setting is, the initial value won’t be in the ele- ment’s style object. To the rescue, in IE5+ anyway, comes an extra, read-only property — currentStyle — that reveals the style sheet values that are currently being applied to the element, regardless of where the style sheet definitions are. The currentStyle property returns an object that is in the same format and has the same properties as the regular style property. If your audience runs browsers no earlier than IE5, then you should make a habit of reading styles for an element via its currentStyle property. If you want a change to a style object’s property to apply to only one element, then use the element’s style property to set that value; but if the change is to apply to all elements covered by the same remote style sheet rule, then modify the style property of the rule object. STYLE Element Object See Chapter 15 for items shared by all HTML elements. Properties Methods Event Handlers media type STYLE 781 Chapter 30 ✦ Style Sheet and Style Objects Syntax Accessing STYLE element object properties and methods: (IE4+) document.all.objectID.property | method([parameters]) (IE5+/NN6) document.getElementById(objectID).property | method([parameters]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ About this object The STYLE element is among the classification of HTML directive elements (see Chapter 20) in that it goes in the HEAD portion of a document and does not have any of its own content rendered in the page. But the contents obviously have a great amount of control over the rendering of other elements. Most of the proper- ties, methods, and event handlers that the STYLE element inherits from all HTML elements are irrelevant. One exception is the Boolean disabled property. Although there are additional ways to disable a style sheet (the disabled property of the styleSheet object), it may be easier to disable or enable a style sheet by way of the STYLE element object. Because you can assign an ID to this element and reference it explicitly, doing so may be more convenient than trying to identify which styleSheet object among the document’s styleSheets collection you intend to enable or disable. Properties media Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ The media property represents the MEDIA attribute of a STYLE element. This attribute can define what kind of output device is governed by the style sheet. The HTML 4.0 specification has lofty goals for this attribute, but at best, computer browsers are limited to the following values: screen, print, and all. Thus, you can design one set of styles to apply when the page is viewed on the computer screen and a different set for when it’s printed. type Value: String Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ STYLE.type 782 Part III ✦ Document Objects Reference The type property represents the TYPE attribute of the STYLE element. For CSS style sheets, this property is always set to text/css. If your scripts assign some other value to this property and the browser does not support that style sheet type, the style sheet no longer functions as a CSS style sheet, and any styles it con- trols revert to their default styles. styleSheet Object Properties Methods Event Handlers cssRules addImport() cssText addRule() disabled deleteRule() href insertRule() id removeRule() imports media ownerNode ownerRule owningElement pages parentStyleSheet readOnly rules title type Syntax Accessing styleSheet object properties and methods: (IE4+/NN6) document.styleSheets[index].property | method([parameters]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ styleSheetObject 783 Chapter 30 ✦ Style Sheet and Style Objects About this object If the STYLE element object is the concrete incarnation of a style sheet, then the styleSheet object is its abstract equivalent. A styleSheet object exists by virtue of a style sheet definition being embedded in the current document either by way of the <STYLE> tag or linked in from an external file via the <LINK> tag. Each element that introduces a style sheet into a document creates a separate styleSheet object. Access to a styleSheet object is via the document.styleSheets array. If the docu- ment contains no style sheet definitions, then the array has a length of zero. Styles that are introduced into a document by way of an element’s STYLE attribute are not considered styleSheet objects. Although both IE4+ and NN6+ present styleSheet objects — and the object repre- sents the same “thing” in both browser families — the set of properties and meth- ods diverges widely between browsers. In many cases, the object provides the same information but through differently named properties in the two families. Interestingly, on some important properties, such as the ones that return the array of style rules and a reference to the HTML element that is responsible for the style sheet’s being in the document, IE5+/Mac provides both the Microsoft and W3C ter- minology. Methods for this object focus on adding rules to and deleting rules from the style sheet. For the most part, however, your use of the styleSheet object will be as a reference gateway to individual rules (via the rules or cssRules array). Properties cssRules Value: Array of rule objects Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ (✓)(✓) The cssRules property returns an array of style sheet rule objects. Strictly speaking, the objects are called cssRule objects in the W3C DOM terminology. This property is implemented in the Mac version of IE5+, but not in the Windows version as of IE5.5. The list of rule objects is in source code order. The corresponding IE4+/Windows property is rules. Example on the CD-ROM Related Items: rules property; cssRule, rule objects. cssText Value: String Read/Write On the CD-ROM styleSheetObject.cssText 784 Part III ✦ Document Objects Reference NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ The cssText property contains a string of the style sheet rules contained by the styleSheet object. Parsing this text in search of particular strings is not wise because the text returned by this property can have carriage returns and other for- matting that is not obvious from the text that is assigned to the rules in the style sheet. But you can use this property as a way to completely rewrite the rules of a style sheet in a rather brute-force manner: Assemble a string consisting of all the new rules and assign that string to the cssText property. The more formal way of modifying rules (adding and removing them) is perhaps better form, but there is no penalty for using the cssText property if your audience is strictly IE5+. Example on the CD-ROM Related Items: addRule(), deleteRule(), insertRule(), removeRule() methods. disabled Value: Boolean Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ While the disabled property of the STYLE element object works with that ele- ment only, the styleSheet object’s disabled property works with a styleSheet object that comes into the document by a LINK element as well. Enabling and disabling style sheets is one way to swap different appearance styles for a page, allowing the user to select the preferred style. The page can con- tain multiple style sheets that control the same selectors, but your script can enable one and disable another to change the overall style. You can even perform this action via the onLoad event handler. For example, if you have separate style sheets for Windows and Mac browsers, you can put both of them in the document, initially both disabled. An onLoad event handler determines the operating system and enables the style sheet tailored for that OS. Unless your style sheets are very extensive, there is little download performance penalty for having both style sheets in the document. Example on the CD-ROM On the CD-ROM On the CD-ROM styleSheetObject.disabled 785 Chapter 30 ✦ Style Sheet and Style Objects Related Items: disabled property of the STYLE element object. href Value: String Read/Write (See Text) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ When a style sheet is linked into a document via a LINK element, the href prop- erty of the styleSheet object contains a string with the URL to that file. Essentially, the href property of the LINK element is passed along to the styleSheet object that loads as a result. In IE4+ for Windows only, this property is read/write, allowing you to dynamically link in an external style sheet file after the page has loaded. In IE/Mac and NN6, this property is read-only. Related Items: LINK element object. id Value: String Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ The id property of a styleSheet object inherits the id property of its containing element (STYLE or LINK element). This can get confusing, because it may appear as though two objects in the document have the same ID. The id string, however, can be used as an index to the document.styleSheets array in IE4+ (for example, document.styleSheets[“winLINK”]). NN6 does not provide a comparable identi- fier associated with a styleSheet object. Related Items: id property of all element objects. imports Value: Array of styleSheet Objects Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ A style sheet can contain one or more @import rules to import an external style sheet file into the document. Each imported styleSheet object is treated as an import object. The imports property is a collection of all imported styleSheet objects that belong to the current styleSheet object. Imported style sheets are not styleSheetObject.imports 786 Part III ✦ Document Objects Reference added to the document.styleSheets collection, so that references to an imported styleSheet object must be through the document.styleSheets[i].imports[i] array. An import object is, itself, a styleSheet object. All properties and methods appli- cable to a styleSheet object also apply to an import object. Therefore, if you want to load a different external style sheet into the page, you can assign the new URL to the imported styleSheet object’s href property: document.styleSheets[0].imports[0].href = “alternate.css” Modifications of this nature work in IE for Windows, but not in IE/Mac as of Version 5. Related Items: styleSheet object. media Value: See Text Read/Write NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ CSS style sheets can be defined to apply to specific output media, such as the video display screen, printer, and, in the future, devices such as speech synthesiz- ers or Braille generators. A style sheet gets this direction from the MEDIA attribute of a STYLE or LINK element. That value is represented in the media property of the styleSheet object. In IE4+, the media property value is a string with one of three possible values: screen, printer, all. The W3C DOM and NN6 take this one step further by allow- ing for potentially multiple values being assigned to the MEDIA attribute. The NN6 value is an array of string media names. Related Items: None. ownerNode Value: Node Reference Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ The ownerNode property is a reference to the document node in which the styleSheet object is defined. For styleSheet objects defined inside STYLE and LINK elements, the ownerNode property is a reference to that element. The corre- sponding property in IE4+ is owningElement. Oddly, IE5/Mac has an additional, misnamed property called owningNode, whose value equals that of the owningElement property. styleSheetObject.ownerNode 787 Chapter 30 ✦ Style Sheet and Style Objects Example on the CD-ROM Related Items: ownerRule, owningElement property. ownerRule Value: cssRule Object Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ The ownerRule property applies to a styleSheet object that has been imported into a document via the @import rule. The property returns a reference to the @import rule responsible for loading the external style sheet. There is an interac- tion between the ownerRule and ownerNode properties in that an imported rule has an ownerRule but its ownerNode property is null; conversely, a regular styleSheet has an ownerNode, but its ownerRule property is null. Note that NN6 does not expose imported style sheets as objects, so this property is not yet appli- cable to NN. Related Items: ownerNode property. owningElement Value: Element Reference Read-Only NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ The owningElement property is a reference to the element object in which the styleSheet object is defined. For styleSheet objects defined inside STYLE and LINK elements, the owningElement property is a reference to that element. The corre- sponding property in NN6+ is ownerNode. Oddly, IE5/Mac has an additional, mis- named property called owningNode, whose value equals that of the owningElement property. Example on the CD-ROM Related Items: ownerNode property. On the CD-ROM On the CD-ROM styleSheetObject.owningElement . 778 Part III ✦ Document Objects Reference client operating system, learning the common denominator of. implements a fair amount of CSS, it does not expose style sheets or style rules to the object model. Part of this is linked to the static nature of an NN4 page. Because modifying a style may alter. concern themselves solely with the style object, and at that, a style object associated with a particular element object. Rare are instances that require manipulation of styleSheet objects beyond