CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.
Jump to...
-Free JavaScripts
-JS tutorials
-JS Reference
-DHTML/CSS
-Free applets
-Web Tutorials
-Link to Us!
Getting global and external
style sheet values in DHTML
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 property's value that is. You quickly run into a problem- the familiar "style" object of DHTML in both IE5+ and NS6+ doesn't work, as it can only help you get values of inline style sheets. 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 style sheets 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, height, 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 cannot reach them.
-Tutorial introduction
-Getting global and external style sheet values in IE5+
-Getting global and external style sheet values in NS6+
-Cross browser function for retrieving global/external CSS properties
