Getting global and external style sheet values in DHTML
Last updated: April 16th, 09
If you work with CSS, you probably know that the best place to define
it in most cases is either in the HEAD section of your page (global CSS),
or as a separate css file (external CSS). And you probably won't ever
regret this decision either, unless you need to dynamically retrieve one
of its properties' value that is. You quickly run into a problem- probing the
familiar "style" object of DHTML in both IE and
Firefox doesn't do much good in this case, as it can only help you get values of inline
CSS property values, not global/external. In this tutorial, I'll discuss how to overcome this
limitation.
Getting inline style sheet values
Just for the sake of anyone that may have missed the Dynamic CSS wagon,
you can probe property values of inline CSS properties via the "style"
object of DHTML. For example:
<div id="test" style="width: 100px; height: 80px;
background-color: yellow">This is some text</div>
<script type="text/javascript">
//get the value of the two CSS properties above
alert(document.getElementById("test").style.width)
alert(document.getElementById("test").style.backgroundColor)
</script>
This works great, but what if the styles (ie: "width"
or "background-color") were defined in a global or even external style sheet?
Then the browser will return empty values instead, as the lazy "style"
object refuses to travel that far to retrieve those values. This is
where two different
