Get the rendered style of an element
I guess most of you, one time or another, has had the need to find out what style was actually rendered on an element. The easiest way to do this is through the style property followed by the specific value you’re looking for:
var intPosLeft = document.getElementById("left").style.left;
However, this only works if the CSS has been applied inline on the element. As we all (or at least most of us) have realized, having inline styles isn’t a very good and efficient approach. So then we move all our CSS to an external file and suddenly the style property return no values when checking it.
What the hell happened?
The style property is reserved for inline styles (ridiculous, if you ask me), so you need to find another way to do it. Of course, then, there’s one standard way and one Microsoft way.
I have put together a function named getStyle (yes, the name is supposed to be funny) to solve this issue for you:
I’ve updated one line for IE per zcorpan’s suggestion. The previous code worked fine as well, it’s just a matter of personal preference when it comes to code syntax.
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
It is then called, for instance, like this:
getStyle(document.getElementById("container"), "font-size");
The first parameter is an object reference to the element you want to check, the second is the CSS name of the property you want to know the rendered value for.
Interesting to know is that specific values will return a value even if it was applied by shorthand in the CSS. For example, this will work just fine:
/* Element CSS*/
div#container{
font: 2em/2.25em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
var elementFontSize = getStyle(document.getElementById("container"), "font-size");An other interesting thing is that Firefox, Opera and Safari will returned the actual pixels of a font size applied with em, while IE only return the value in em.
Web browser compatibility
This script has been tested to work in the following web browsers:
- IE 5.5+
- Firefox
- Safari
- Opera 8.5
The reason that it doesn’t work in IE 5.0 is having a function in the replace method as a second parameter. You might want to put this in a try...catch clause if you expect any users with that version, like this:
try{
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
catch(e){
// Used to prevent an error in IE 5.0
}
Download the JavaScript file
Download the getStyle JavaScript file.
Kristin
