Приглашаем посетить
Культура (niv.ru)

Style Sheet Properties

Style Sheet Properties

Style sheets expose a number of properties that control the appearance of an element's contents. In the object model, these properties are exposed using a consistent naming convention. Most properties in CSS separate keywords using a hyphen (-) character. Because the hyphen is interpreted as an operator in most language constructs, it cannot be part of any CSS property names as exposed in the object model. Furthermore, for case-sensitive languages such as JavaScript, each CSS property is exposed consistent with other properties—that is, the first keyword is lowercased, and all subsequent keywords are capitalized. For example, the CSS margin-top property is exposed in the object model as marginTop.


NOTE: While this rule is simple and can be applied generally, one exception is necessary in order to avoid a keyword conflict with scripting languages. The CSS float property specifies whether an element should be aligned at the left or right edge with subsequent contents wrapping the element. Because float is a common data type in many languages, the CSS float property is exposed as styleFloat in the object model.

Compound Properties

Many style sheet properties are defined as compound properties. For example, the CSS background attribute contains information about the background image, URL, position, and so on. The following code shows the background attribute defined for the Body element:

body {background:red URL(cool.gif)}

These compound properties can be difficult to manipulate through script. To script the background property, a developer would have to parse the CSS property into its core components. This parsing is simplified in the CSS object model by decomposing compound CSS properties into multiple properties, each representing an aspect of the property. The following table lists the individual properties of the background property.


Property Description
backgroundColor String color name or RGB value
backgroundImage URL to the background image
backgroundPosition Position of the background image
backgroundRepeat Whether the background image repeats horizontally, vertically, or both
backgroundScroll Whether the background image scrolls with the document or acts as a static watermark

The cssText Property

The cssText property contains an element's style in the form of a string. Using this property, you can set an element's entire style or copy a style from one element to another. The following code gives paragraph p2 the same style as p1. The section "Style Sheet Painter" later in this chapter provides a detailed example of defining and sharing style rules across an entire document.

<HTML>
   <HEAD>
      <TITLE>Sharing the cssText Property</TITLE>
   </HEAD>
   <BODY>
      <P ID="p1" STYLE="text-indent:.5in; color:red">
         This paragraph is red with a half-inch indent.
      </P>
      <P ID="p2">
         This paragraph has a default appearance. Click 
         <INPUT TYPE=BUTTON VALUE="here"
            ONCLICK="document.all.p2.style.cssText =
               document.all.p1.style.cssText;">
         to make this paragraph look like the first paragraph.
      </P>
   </BODY>
</HTML>

Modifying Properties

Most of the style sheet properties supported by Internet Explorer 4.0 can be dynamically modified, but a few properties cannot be dynamically changed:

[Содержание]