So far, we have seen how to use CSS attributes with style sheets and traditional HTML. Every HTML element that supports the STYLE attribute is represented internally by Internet Explorer as an object with a style child object. All CSS attributes are represented as properties of this style child object. In this chapter, we will learn how to use script to manipulate an object's style, just as we saw script used to control other aspects of objects in Part 2 of this book.
When you use scripting, you can access all CSS attributes through their corresponding properties in the Dynamic HTML Object Model. Sometimes an attribute and its corresponding property have slightly different names because the hyphen specified by CSS conventions is not allowed in the Object Model, where it could be incorrectly read as a minus sign. As a general rule, you can convert a CSS attribute to its Object Model equivalent by removing all hyphens from the attribute name and capitalizing any letter that originally followed a hyphen. For example, the CSS attribute background-image corresponds to the Object Model property backgroundImage, and the page-break-before attribute corresponds to the pageBreakBefore property.
Some CSS attributes have multiple representatives in the Dynamic Object Model. For instance, you can affect the CSS attribute background-position through script by using the backgroundPosition, backgroundPositionX, or backgroundPositionY property. (The latter two allow more specific control.) Table 15-1 lists all CSS attributes and their equivalent properties in the Dynamic Object Model.
Table 15-1 CSS Attributes and Corresponding Object Model Properties
CSS Attribute | Object Model Property |
---|---|
background | background |
background-attachment | backgroundAttachment |
background-color | backgroundColor |
background-image | backgroundImage |
background-position | backgroundPosition backgroundPositionX backgroundPositionY |
background-repeat | backgroundRepeat |
behavior | behavior |
border | border |
border-bottom | borderBottom |
border-bottom-color | borderBottomColor |
border-bottom-style | borderBottomStyle |
border-bottom-width | borderBottomWidth |
border-collapse | borderCollapse |
border-color | borderColor |
border-left | borderLeft |
border-left-color | borderLeftColor |
border-left-style | borderLeftStyle |
border-left-width | borderLeftWidth |
border-right | borderRight |
border-right-color | borderRightColor |
border-right-style | borderRightStyle |
border-right-width | borderRightWidth |
border-style | borderStyle |
border-top | borderTop |
border-top-color | borderTopColor |
border-top-style | borderTopStyle |
border-top-width | borderTopWidth |
border-width | borderWidth |
clear | clear |
clip | clip |
color | color |
[no equivalent] | cssText |
cursor | cursor |
direction | direction |
display | display |
filter | filter |
float | styleFloat |
font | font |
font-family | fontFamily |
font-size | fontSize |
font-style | fontStyle |
font-variant | fontVariant |
font-weight | fontWeight |
height | height posHeight pixelHeight |
ime-mode | imeMode |
layout-grid | layoutGrid |
layout-grid-char | layoutGridChar |
layout-grid-char-spacing | layoutGridCharSpacing |
layout-grid-line | layoutGridLine |
layout-grid-mode | layoutGridMode |
layout-grid-type | layoutGridType |
left | left posLeft pixelLeft |
letter-spacing | letterSpacing |
line-height | lineHeight |
list-style | listStyle |
list-style-image | listStyleImage |
list-style-position | listStylePosition |
list-style-type | listStyleType |
margin | margin |
margin-bottom | marginBottom |
margin-left | marginLeft |
margin-right | marginRight |
margin-top | marginTop |
overflow | overflow |
overflow-x | overflowX |
overflow-y | overflowY |
padding | padding |
padding-bottom | paddingBottom |
padding-left | paddingLeft |
padding-right | paddingRight |
padding-top | paddingTop |
page-break-after | pageBreakAfter |
page-break-before | pageBreakBefore |
position | position |
ruby-align | rubyAlign |
ruby-overhang | rubyOverhang |
ruby-position | rubyPosition |
table-layout | tableLayout |
text-align | textAlign |
text-decoration | textDecoration textDecorationBlink textDecorationLineThrough textDecorationNone textDecorationOverline textDecorationUnderline |
text-indent | textIndent |
text-justify | textJustify |
text-transform | textTransform |
top | top posTop pixelTop |
vertical-align | verticalAlign |
visibility | visibility |
width | width posWidth pixelWidth |
word-break | wordBreak |
z-index | zIndex |
When you read or set (write) a property of the style object, you should use dot notation, which describes where an item fits in the Dynamic Object Model. The following tag, named MySpan, contains the STYLE attribute, which specifies the color blue for this SPAN element.
<SPAN ID="MySpan" STYLE="color: blue">Hello!</SPAN> |
You can refer to this in the Dynamic Object Model by accessing the MySpan object, then its style subobject, and finally its color property. To do so, use dot notation as follows:
MySpan.style.color |
You can use expressions such as this one to read the values of properties through the Object Model. For instance, if you want to assign the value of the color property of MySpan's style subobject to a variable named itsColor, use the following line of script.
itsColor=MySpan.style.color |
Based on the initial HTML sample tag, the variable itsColor would be set to the value blue.
You can also use dot notation to change a property. For example, if you want to set the text color of MySpan to red, instead of blue, use this script:
MySpan.style.color="red" |
Once this line is executed, the text changes color. Because the term red is not defined in the Object Model, it must be enclosed in quotation marks. Otherwise, it is treated as an undefined variable named red, and an error appears.
If you want to set the color property equal to a variable that has already been defined, you do not need to include quotation marks. For example, the following code changes the color of MySpan to red.
myVariable="red" MySpan.style.color=myVariable |
It is also unnecessary to use quotation marks around numbers. For example, the following code sets the width property of MySpan to 50.
MySpan.style.width=50 |