| |
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:
- The display property can only be switched between none and the default value. Therefore, elements cannot be switched between block and inline formats. Assigning a value other than none or the default value displays the document's contents using the default value.
- The styleFloat property is not fully dynamic on text elements such
as Span and DIV. For text elements, the styleFloat property can only be changed from left to right or vice versa. If a text element was
not originally floating to the left or to the right, it cannot be changed following the loading of the document. For input elements (Select, Button, Input, and so on), the styleFloat property can be dynamically modified between all the valid values.
- The position property is read-only and cannot be
dynamically changed on any element.
[Содержание]
|
