Uncle Jim's Web Designs and Tutorials

This is part five of a series on Dynamic HTML


Accessing the Layer

Review

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!

Here's a relatively easy example

First, 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 the following code:

document.images['myImage'].src
Now that we have access to the property, we can modify it, save it as a variable, use it to display in an alert, etc....

Accessing 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 like we used 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:

Browser Access CSS Property Example
Netscape 6 and IE 5 (W3C) document.getElementById(layerID).style.propertyName document.getElementById("myLayer1").style.top
Internet Explorer 4 (IE 5 also) document.all[layerID].style.propertyName document.all["myLayer1"].style.top
Netscape 4 document.layers[layerID].propertyName document.layers["myLayer1"].top

 

Hyphenated Styles

I should mention that 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>

This produces the following:

Changing 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:

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;
	}

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

Next, we will go over object animation.