JavaScript Bible, Gold Edition part 94 ppsx

The objects in question are ✦ STYLE element object ✦ styleSheet object a member of the styleSheetsarray ✦ rule or cssRule object a member of the rulesor cssRulesarray ✦styleobject A STYL

Trang 1

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 styleSheetsarray)

✦ rule or cssRule object (a member of the rulesor cssRulesarray)

✦styleobject

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

disabledproperty, 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 documentobject, 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 rulesor cssRulesproperty 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+

Trang 2

The last object of this quartet of style-related objects is the styleobject 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 styleproperties

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 styleobject is also a property of a rule/cssRuleobject Thus, if you

need to modify the style of elements affected by an existing style sheet rule, you

approach the styleobject through a different reference path, but the styleobject

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 styleobject, and at that, a

styleobject 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 styleobject 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 @importselector:

@import url(externalStyle.css);

P {font-size:16pt}

</STYLE>

In this example scenario, the document sees just one styleSheetobject 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 importobject An import

object has all the properties of any styleSheet object, but its parentStyleproperty

is a reference to the styleSheet that “owns” the @importrule 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 importrule objects differently from the IE model

To the W3C DOM, even an at-rule is considered one of the cssRulescollection 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 importrule Of course, an imported rule object then has

as one of its properties the styleSheet object that, in turn, contains the rules

Trang 3

defined in the external style sheet file The parent-child relationship exists here, as well, whereby the styleSheet that contains the @importrule is referenced by the imported styleSheet object’s parentStyleproperty (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 STYLEattribute 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 styleproperty 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 styleproperty, that’s not a problem, because your assignment to the element object’s style prop-erty overrides whatever style is assigned to that propprop-erty in the remote style sheet (and then that new value is subsequently readable from the styleproperty) But if you want to see what the current setting is, the initial value won’t be in the ele-ment’s styleobject

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

currentStyleproperty returns an object that is in the same format and has the same properties as the regular styleproperty If your audience runs browsers no earlier than IE5, then you should make a habit of reading styles for an element via its currentStyleproperty If you want a change to a styleobject’s property to apply to only one element, then use the element’s styleproperty 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 styleproperty of the rule object

STYLE Element Object

See Chapter 15 for items shared by all HTML elements

Properties Methods Event Handlers

media type

STYLE

Trang 4

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

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 disabledproperty Although there are additional

ways to disable a style sheet (the disabledproperty 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 styleSheetscollection you intend to enable or disable

Properties

media

The mediaproperty represents the MEDIAattribute 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

STYLE.type

Trang 5

The typeproperty represents the TYPEattribute 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

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])

styleSheetObject

Trang 6

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.styleSheetsarray 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 STYLEattribute 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 rulesor cssRulesarray)

Properties

cssRules

The cssRulesproperty 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:rulesproperty; cssRule, ruleobjects

cssText

On the

CD-ROM

styleSheetObject.cssText

Trang 7

The cssTextproperty 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 cssTextproperty The more formal way of modifying rules (adding and removing them) is perhaps better form, but there is no penalty for using the cssTextproperty if your audience is strictly IE5+

methods

disabled

While the disabledproperty of the STYLE element object works with that ele-ment only, the styleSheet object’s disabledproperty 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 onLoadevent 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 onLoadevent 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

On the

CD-ROM

On the

CD-ROM

styleSheetObject.disabled

Trang 8

Related Items:disabledproperty of the STYLE element object.

href

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 hrefproperty 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

The idproperty of a styleSheet object inherits the idproperty 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 idstring, however, can

be used as an index to the document.styleSheetsarray in IE4+ (for example,

document.styleSheets[“winLINK”]) NN6 does not provide a comparable

identi-fier associated with a styleSheet object

Related Items:idproperty of all element objects

imports

A style sheet can contain one or more @importrules to import an external style

sheet file into the document Each imported styleSheet object is treated as an

importobject The importsproperty is a collection of all imported styleSheet

objects that belong to the current styleSheet object Imported style sheets are not

styleSheetObject.imports

Trang 9

added to the document.styleSheetscollection, so that references to an imported styleSheet object must be through the document.styleSheets[i].imports[i]

array

An importobject is, itself, a styleSheet object All properties and methods appli-cable to a styleSheet object also apply to an importobject 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 hrefproperty:

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

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 MEDIAattribute

of a STYLE or LINK element That value is represented in the mediaproperty of the styleSheet object

In IE4+, the mediaproperty 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 beallow-ing assigned to the MEDIAattribute The NN6 value is an array of string media names

Related Items: None.

ownerNode

Compatibility ✓

The ownerNodeproperty is a reference to the document node in which the styleSheet object is defined For styleSheet objects defined inside STYLE and LINK elements, the ownerNodeproperty 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

owningElementproperty

styleSheetObject.ownerNode

Trang 10

Related Items:ownerRule, owningElementproperty

ownerRule

Compatibility ✓

The ownerRuleproperty applies to a styleSheet object that has been imported

into a document via the @importrule The property returns a reference to the

@importrule responsible for loading the external style sheet There is an

interac-tion between the ownerRuleand ownerNodeproperties in that an imported rule

has an ownerRulebut its ownerNodeproperty is null; conversely, a regular

styleSheet has an ownerNode, but its ownerRuleproperty 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:ownerNodeproperty

owningElement

The owningElementproperty is a reference to the element object in which the

styleSheet object is defined For styleSheet objects defined inside STYLE and LINK

elements, the owningElementproperty 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

owningElementproperty

Related Items:ownerNodeproperty

On the

CD-ROM

On the

CD-ROM

styleSheetObject.owningElement

Định dạng
Số trang	10
Dung lượng	112,6 KB