Cascading Style Sheets (CSS) were created to separate formatting from content. They can greatly facilitate the development and maintenance of webpages. The good news in this context is that they can be used in a variety of ways to augment the power of DHTML. And they're even relatively browser-neutral!

Easy example

Let's look at the syntax involved in an easy example first, accessing an image's source property:

<img src="someImage.gif" name="myImage">

We can access this image's src with DOM by using:

document.images['myImage'].src

Once accessed, we can modify it, save it as a variable, use it to display in an alert, etc....

Access CSS in a layer

We can do the same thing with CSS properties in layers, although it's not necessarily as easy as accessing an image's source property because of some browser inconsistancies.

To define CSS properties within a layer, we use the style="*properties*" attribute as employed in our example:

<div id="myLayer1" style="position:absolute;top:100;left:150;z-index:3"></div>

To manipulate them, we must first access the layer and then extend the reference with .style.propertyName (except in NN 4).

These methods are summarized in the following table:

Hyphenated Styles

Of course, there are some "oddities". For example, to access a CSS property containing a hyphen, such as z-index, delete the hyphen and capitalize the next letter (zIndex). Here's a script to alert the z-index of our layer.

<script language="javascript" type="text/javascript">
function alertFF(){
     if(document.getElementById){
          alert(document.getElementById("myLayer1").style.zIndex);
     }else if(document.all){
          alert(document.all["myLayer1"].style.zIndex);
     }else if(document.layers){
          alert(document.layers["myLayer1"].zIndex);
     }
}
</script>
<form><p><input type="button" onclick="alertFF()" value="Click Here to alert the layer's z-index"></p></form>

Position

Another "oddity" occurs when manipulating layer coordinates. In some browsers, left and top will return values with "px" appended, as in "300px." If you want to alter these by, e.g., adding another value, you should parseInt() the returned value to drop the "px" and create the value in numerical format instead a string. Some authors substitute with pixelLeft and pixelTop, but because of browser inconsistencies, I advise using the properties, top and left, in accordance with using parseInt(). Here's an example of what I mean:

     if(document.getElementById){
          document.getElementById("myLayer1").style.left = parseInt(document.getElementById("myLayer1").style.left) +3;
          document.getElementById("myLayer1").style.top = parseInt(document.getElementById("myLayer1").style.top) +3;
     }else if(document.all){
          document.all["myLayer1"].style.left = parseInt(document.all["myLayer1"].style.left) +3;
          document.all["myLayer1"].style.top = parseInt(document.all["myLayer1"].style.top) +3;
     }else if(document.layers){
          document.layers["myLayer1"].left = parseInt(document.layers["myLayer1"].left) +3;
          document.layers["myLayer1"].top = parseInt(document.layers["myLayer1"].top) +3;
     }

Now's a good time to point out that the best way to benefit from this tutorial is to fool around using what we've discussed. With just the basic outline provided in this section, you have a lot of the information needed to do just about anything. By experimenting on your own, you can have fun and learn at the same time! Who needs directions, right? :-)

The next section builds on the foundation we've established to do things like animation and later rewriting content.

Next -->