I have the object named "theObj". In the last lesson I said I had accessed the CSS properties of theObj. Here is the HTML for "theObj":

<span id="theObj" style="position: relative; left: -100;"><img src="url" width=200></span>

So then, the CSS properties of "theObj" are this:

style="position: relative; left: -100;"

Not many properties, but still there nonetheless. Remember that in dHTML, you change the CSS properties by using JavaScript. So we're going to change the above CSS properties by using that script. So, I said I had accessed the CSS properties of "theObj". The above were the CSS properties I had accessed. How did I access them? Like this. Remember when I did the script that alerted "[object]" or "[object Layer]"? With that script I had accessed the object. With the browser Microsoft, to access the object, you use:

theObj

That's what I used when I did alert(theObj); Simple enough, you just use the object's name, in this case "theObj". Then, to access the CSS properties in MIE 4.0 you do this:

theObj.style

Notice how in the <span> tags we used the same word: "style". So to access the CSS properties of theObj, you add ".style" to it. Now to access a certain property, you add the name of the property onto the end like so:

theObj.style.left

In the above I just accessed the objects position from the left of the page, which is -100. Simple enough. That was in Microsoft Internet Explorer. Here's what it looks like with Netscape:

document.theobj.left

document.theobj accessed the object. Then .left accessed the left property, which again is -100. Notice that there is nothing to access the "style", or the CSS properties. It just skipped from the object to the certain property.

If that confused you, think of it as a mansion. The mansion is an object. You open the door to the mansion with theObj. Then, to get to the "style" room, you open the door with .style, and then from there, you have a door to the "left" room, which is opened with ".left". So to go to that singular room with the left information you use "theObj.style.left".

So now, let's use what we just learned for an easier script. Let's create a quick object. This time it's text. Behold the object:

This objects name is "txt1". It's CSS properties are: "position: relative; left: 20; top: 0; font-family: arial; font-size: 10pt;". Now, with a script, how would I access the left property of this object? Use: txt1.style.left for Microsoft and document.txt1.left for Netscape.

Let's expand on the earlier alert(obj) script with accessing the specific "left" property. The script:

<script language="JavaScript">
<!--

function checkIt() {

// begin with the usual detect browser routine

var m = (document.all);
var n = (document.layers);

if (m) {
        alert(txt1);
       } else {
               alert(document.txt1.left);
              }
return false;
}               
                  
//-->
</script>

the script in action

The script detects the browser with the lines:

var m = (document.all);
var n = (document.layers);

Next is the most important things. This part:

if (m) {
        alert(txt1.style.left);
       } else {
               alert(document.txt1.left);
              }

This part should make some good sense, but let's go over it anyway. if (m) { translates to "if the browser is MIE 4.0, then do the following" The next line is "the following". alert(txt1.style.left); using txt1.style.left, it accesses the left property of the CSS properties. The alert should say...any guesses? It should say 20px. Then the next line: } else { It says "If the browser isn't MIE 4.0 then do the following." The next line: alert(document.txt1.left); accesses the CSS properties the Netscape way. This alert should also say 20. Then everything is closed with a }.

Please notice that in Microsoft, the alert says "20px", and in Netscape it says "20". In Netscape it is missing the "px". You'll need to know that in the next lesson.

Whew, make sense? Good. Now that we know how to access the CSS properties. Let's change them with that example in the next lesson.