CSS and the Dynamic HTML Object Model

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