Entry
Why is elementRef.style.propertyName not giving me the style of an element when I don't use inline styles (IE4+/NN6)?
How do I access the current style of an element?
How do I access the cascaded style of an element?
Jan 16th, 2003 20:01
Mark Filipak, Martin Honnen,
HTML page elements in IE4+ and NN6 have a
style
object property with sub properties for all the css style attributes
the browser supports e.g.
elementRef.style.color
for the text color
elementRef.style.fontSize
for the font size.
This style object is however not giving you the computed/cascaded style
of an element but is (initially) only a reflection of the inline style
set on an element and later only reflecting what you assign to it.
Thus
<P STYLE="color: orange;"
ONCLICK="alert(this.style.color)"
>
shows you the string
orange
while
<P ONCLICK="alert(this.style.color)">
shows you an empty string as the inline style color value is empty.
So how do you get the current computed/cascaded style of an element, in
particular for elements which don't have an inline style? IE5 has
support for that with introducing the
currentStyle
object property for HTML page elements. Contrary to the
style
object the currentStyle gives you a value for all elements, whether
they have an inline style, a style class, a named style rule or no
style setting at all inheriting its styles from the document body.
Try the following with IE5 and you will see the difference between the
currentStyle and the style object:
<HTML>
<HEAD>
<STYLE>
.aStyleClass {
color: white;
background-color: orange;
}
#aDiv {
color: lightblue;
}
</style>
</head>
<BODY>
<DIV CLASS="aStyleClass"
ONCLICK="if (document.all && document.getElementById)
alert(this.currentStyle.color);"
>
JavaScript.FAQTs.com
<BR>
This is a DIV with CLASS attribute set. Click to see the color style.
</div>
<DIV ID="aDiv"
ONCLICK="if (document.all && document.getElementById)
alert(this.currentStyle.color);"
>
This is a DIV with a named style rule. Click to see the color style.
</div>
<P ONCLICK="if (document.all && document.getElementById)
alert(this.currentStyle.color);"
>
This is a paragraph without any special style settings.
Click to see the color style.
</p>
</body>
</html>
IE4 and NN6 don't have support for the currentStyle object though NN6
is expected to provide its own mechanism for that.
--- begin addition to Martin's comments, but for DOM2 --
Continuing with 'elementRef' as the element (SPAN or DIV) reference, you
can get the computed/cascaded value for a style property ('height' in
this example) like this:
myElementCS = document.defaultView.getComputedStyle(elementRef, '');
myHeight = myElementCS.getPropertyValue('height');
Of course, this could be (unreadably) strung together like this:
myHeight = document.defaultView.getComputedStyle(elementRef,
'').getPropertyValue('height');
And if it is an id-ed element (hmm... suppose id='myElement'), it can be
totally strung together like this:
myHeight =
document.defaultView.getComputedStyle(document.getElementById('myElement'),
'').getPropertyValue('height');
Bear in mind that, unfortunately, getComputedStyle(elementRef, '') can
only be used to get the computed style properties for elements that are
*already* in the BODY. That means that if you create a document fragment
and attempt to get the computed style properties (of one of its
inner-DIVs, for example) before doing an appendChild to the BODY
element, the JavaScript interpreter will raise an exception because the
computed style doesn't exist yet. That's too bad. A work-around is to
create it (the inner-DIV, for example), add it to the BODY as a naked
element, then get its size using getComputedStyle, then delete it, then
add it to your document fragment and adjust the sizes of the parent-DIVs
in the document fragment to make things fit, AND THEN add the whole
document fragment to the BODY. All this fussing is necessary because I
have found no other way to accomplish up-the-tree sizing as there
appears to be no way to send the computed size to an element's parent,
and thereby, up the document tree. <sigh!>
--- end addition to Martin's comments --- Mark
