Categories:
Help

CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.

Partners
This is a

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 is some text

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

Getting global and external style sheet values in IE