Aleenanne : Reference : DHTML Basics

Taylor's Dynamic HTML Tutorial
Lesson 5
by Taylor

Page 4 — Must We Inline Our Styles?

If you are a regular reader of Webmonkey, you probably know that we preach the separation of structure, presentation, and behavior in online documents. You keep your HTML structural, lay it all out with CSS, and then use JavaScript to make it do something. And as much as possible, try not to mix the three of them into a big soupy mess. The problem is that this whole scheme seems to fall apart in Internet Explorer when you give style rules to an object from the head of a document. To see what I mean, try to look at this bit of code in Internet Explorer.

<html>



<head>



<title>DOM example</title>



<style>



#foo {position: absolute; left: 10px; top: 10px}



</style>



<script>



function alertIt() {



   alert(foo.style.left);



</script>



</head>



<body onload="alertIt()">



<div id="foo">This is the sample</div>



</body>



</html>

You get an empty dialog box, don't you?

Now the first frustrated response to this may be to assume that it is broken, and you could certainly make a case for that. But really what is happening is that Explorer is taking this whole separation religion seriously. Because if you look at that document, the object foo doesn't have a style in it, rather it has an ID that is also referenced in the stylesheet. So the only property that foo has is ID. As an experiment, add this to your foo tag.

<div id="foo" bar="neat">This is the sample</div>

Now alert(foo.bar) will return the word "neat." Neat, isn't it? Are you beginning to see how things work in Explorer? Any property placed in a tag is reflected in the DOM as a property of that object. But if it's not in that object, it's not reflected. That's why you've been inlining the styles.

To fix this, and maintain our religious ideals, we again use the object-as-reference ability of JavaScript. But instead of pointing to an HTML object, we point to a stylesheet rule object for the ID and reference that. The result on the page and in your script are the same, but there's no need to inline the styles.

<script>



function setup(myId){



  if(document.layers){



    myObj = document.layers[myID];



  } else if(document.all) {



    for (ss=0 ; ss < document.styleSheets.length; ss++) {



      for (sr=0 ; sr < document.styleSheets(ss).rules.length; sr++) {



	if (document.styleSheets(ss).rules(sr).selectorText == '#' + myId) {



	  myObj = document.styleSheets(ss).rules(sr).style;



	}



      }



    }



  }



}



</script>

What happens is that the script loops through all stylesheets included on the page and all the style rules contained within those stylesheets. If one of the selectors matches the ID of your object, it's aliased as your object. You may proceed as before, but with cleaner HTML code.

next page»