2.7 DHTML: Scripting CSS Styles
DHTML, or Dynamic HTML, is the result of combining HTML, CSS, and
JavaScript: it uses scripts to dynamically modify the
style — which may include the position and visibility — of
document elements. In the W3C and the IE 4 DOMs, every document
element has a style property that corresponds to
the HTML style attribute that specifies inline
styles. Instead of referring to a simple string, however, the
style property refers to a Style object that has
properties corresponding to each of the CSS attributes of the style.
For example, if an element e has a
style attribute that specifies the CSS
color attribute, you can query the value of that
attribute as e.style.color. When a CSS attribute
name contains hyphens, the corresponding JavaScript property name
removes the hyphens and uses mixed-case capitalization. Thus, to set
the background-color CSS attribute of an element
e, you set e.style.backgroundColor. There is one
special case: the CSS float attribute is a
reserved word in JavaScript, so the corresponding JavaScript property
is cssFloat.
The CSS standard defines many properties that you can use to
fine-tune the visual appearance of your documents. The Style entry in
the reference section includes a table that lists them all. The
positioning and visibility properties are particularly relevant for
dynamic scripting. If the position property is set
to absolute, you can use the
top and left properties to
specify the absolute position (in pixels, percentages, or other
units) of the document element. Similarly, the
width and height properties
specify the size of the element. The visibility
property can initially be set to hidden to make a
document element invisible, and then dynamically set to
visible to make the element appear when
appropriate.
Note that the values of all Style properties are always strings, even
for properties like left and
width which represent numbers. When setting these
length and dimension properties, be sure to convert your numbers to
strings and to add the appropriate units specification (usually the
string px for pixels.) The following table
summarizes these positioning and visibility properties:
|
position
|
How the element is positioned. absolute,
relative, fixed, or
static (the default).
|
|
left, top
|
The X and Y coordinates of the left and top edges of the element.
|
|
width
|
The width of the element.
|
|
height
|
The height of the element.
|
|
zIndex
|
The stacking order. Values are integers; higher values are drawn on
top of lower values.
|
|
display
|
How to display the element. Common values are
block, inline, and
none for elements that don't get
laid out at all.
|
|
visibility
|
Whether the element is visible or
hidden. Space is still allocated for
non-positioned hidden elements.
|
|
overflow
|
What to do when element content exceeds element size. Values:
visible (content overflows);
hidden (excess content hidden);
scroll (display permanent scrollbar);
auto (scrollbars only when needed).
|
|
clip
|
What portion of element content to display. Syntax:
rect(top
right bottom left).
|
The following code shows a simple DHTML animation. Each time it is
called, the function nextFrame( ) moves an element
10 pixels to the right and uses setTimeout( ) to
tell JavaScript to call it again in 50 milliseconds. After 20
invocations, the function uses the visibility
property to hide the element and stops calling itself.
<h1 id='title'>DHTML Animation<h1>
<script>
// Look up the element to animate
var e = document.getElementById("title");
// Make it position-able.
e.style.position = "absolute";
var frame = 0; // Initialize frame counter.
// This function moves the element one frame
// at a time, then hides it when done.
function nextFrame() {
if (frame++ < 20) { // Only do 20 frames
e.style.left = (10 * frame) + "px";
// Call ourselves again in 50ms.
setTimeout("nextFrame()", 50);
}
else e.style.visibility="hidden"; // Hide it.
}
nextFrame(); // Start animating now!
</script>
|
