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
}
61 Comments/Reactions
April 24th, 2006 at 11:47
Smutt Robert (smutt – swedish for nice)
April 24th, 2006 at 13:29
Huh? Never have I heard that
April 24th, 2006 at 13:34
I stumbled over this in one of my own projects. Like you said it is pretty ridiculous that the style property only works combined with inline stylerules.
This function will sure come in handy, thanks!
April 24th, 2006 at 16:18
It’s not that ridiculous that .style only maps to inline styles — it’s really just a shortcut to the style attribute.
Granted, it would be mildly less ridiculous if getting the computed style wasn’t so convoluted.
April 24th, 2006 at 16:19
Shouldn’t
strValue = oElm.currentStyle[strCssRule];work instead of usingeval()?April 24th, 2006 at 16:59
Check out the FireFox extension CSSViewer, which does the same thing (at least some of it).
April 24th, 2006 at 18:39
Thanks for the code! I agree with the other poster: try to eliminate the “eval” (blech!)
April 24th, 2006 at 19:56
Similarly, the Firefox extension View Source Chart displays the rendered source (including styles after applied to elements) of the entire document in a neatly structured view. Highly recommended.
April 24th, 2006 at 22:32
[...]
Satunnainen Björklund 24.4.2006 Elementin laskettu tyyli Robert Nyman: Get the rendered style of an element. Näppärää JavaScriptiä. [...]
April 24th, 2006 at 22:33
Kristin, David,
While I have heard that term, it doesn’t have a nice ring to it in English…
Tim,
No problem, I hope it will be of use to you.
Cameron,
Logically, of course you’re correct. But, like you say, it’s probably because it’s so tricky to get the computed style that I’m opposed to that approach, plus the fact that no one uses inline styles anyay, so then
stylebecomes obsolete.zcorpan,
Yes, that works too. Didn’t think of it, but I like that syntax better, so I’ve updated the post and code per your suggestion.
Patrick,
Thanks! Code updated, although in general I don’t regard
eval()as inherently evil…Per, gRegor,
Thanks for the information.
Although, at least not to me, the purpose of this script isn’t just to see what’s rendered as general information, but to act on what value a certain style has got and then build on it in the current web page.
April 24th, 2006 at 23:50
There’s also that oddball ‘float’ css property, in IE it’s ‘elm.styleFloat’ and in moz it’s ‘elm.cssFloat’.
Might want to support that too.
April 25th, 2006 at 9:15
Andrew,
That’s very true, thanks for pointing that out.
I don’t think I’ll incorporate it in this script because a) I want to keep the function as simple and light-weight as possible and b) I think it’s something one rarely looks for thus the need isn’t that big.
However, it’s very good to be aware of that difference.
April 25th, 2006 at 15:34
This is exactly what Prototype library does with its Element.getStyle
April 25th, 2006 at 22:51
Mislav,
Not exactly… the code’s similar, but prototype’s getStyle is broken….
prototype’s getStyle function checks element.style first, assuming that if a specific property is set inline it will override anything set in a stylesheet – and they then avoid a potentially slow call to getComputedStyle. This can produce the wrong result, as !important properties take precedence over inline styles. Unless the inline style is also !important.
If you’ve got a rule like this…
ul { display: block !important }…and some HTML like…
<ul style="display: inline">...</ul>That list isn’t going to be inline, and it still won’t be inline even after using script to set
element.style.display = "block";But, if you’re really stubborn, you can counter-strike with !important in script too:
element.style.display = "block !important";Now, Robert’s getStyle doesn’t have that issue. Let’s assume that’s by design…
April 26th, 2006 at 11:15
That is one of the most annoying differences between Gecko based browsers and Internet Explorer; it is of course related to the
getComputedStyleandcurrentStylefunctions which don’t render the same thing at all. (As their names rightly suggest,getComputedStylereturns the styles as computed for display, whilecurrentStylereturns the result of the cascade, before computation into pixels.)I don’t think one function is better than the other. Actually, I would dream of having both of them available in either browser.
For now, there is unfortunately no middle-ground (i.e. no
getComputedStyleequivalent in IE, and nocurrentStyleequivalent in Firefox).So that’s tough luck if you need a cross-browser solution on issues like font-sizes set in anything else than pixels…
April 26th, 2006 at 16:23
Mislav,
I’m not sure what’s in the Prototype library or how it works, but this is offerred just as a handy function and not a library replacement.
Ash,
Thanks for clearing that up.
Tobie,
Me too…
April 27th, 2006 at 17:02
Could this function be adapted to be a bookmarklet ? Something like: click bookmarklet to see which elements are floated, and which are positioned (by giving them a border or something). It would be great to quickly analyze existing websites and their layout techniques. Giving a border to tables or divs with a bookmarklet is one thing, but instantly seeing the kind of positioning that is used would be really cool. Any ideas ?
April 27th, 2006 at 21:31
Sammy,
I guess that could be done, but for such usage tools like the Web Developer Toolbar extension for Firefox is much better.
May 18th, 2006 at 7:12
I’m very late to the party here, but one could make this script work in IE5 by replacing the regex with:
while(-1 != (dashIndex = strCssRule.indexOf('-'))) {strCssRule= strCssRule.substring(0,dashIndex) + strCssRule.substring(dashIndex + 1, dashIndex + 2).toUpperCase() + strCssRule.substring(dashIndex + 2);
}
Also, it is possible to calculate the pixel height of text by adding a dummy element with a single character inside to the desired location in the document, zeroing padding and borders, setting line-height to 1 and then getting the offsetHeight.
I suspect one could write an ugly little kludge that would use that technique to normalise returned font sizes (or even line-heights) to pixels.
Getting pixel values for borders, padding and so on would be considerably trickier, however.
June 7th, 2006 at 14:34
huge thanks! i added some additional functionality bloat.
July 15th, 2006 at 15:29
Thanks a lot for sharing this useful tip with us.
July 28th, 2006 at 16:09
Do you know how to actually calculate the pixel width of a style in IE for this example? If I don’t set a ‘width’ on an object, FireFox and Safari return the proper pixel width, but IE returns ‘auto’. Any way around it? Thanks!
July 29th, 2006 at 13:35
setmajer,
Thanks for the suggestions. And yes, dummy elements are always good to test things like that.
Inge,
Thank you for the added functionality.
Ess,
No problem!
Juan,
To begin with, the idea is only to find out the rendered value when some CSS is actually applied. However, to make that work in IE, you then need to check for the element’s
offsetWidth, like this:var intWidth = document.getElementById("juans-element").offsetWidth.November 7th, 2006 at 12:25
[...] A very handy way to find out the rendered CSS styles on an element, Described in detail in Get the rendered style of an element. Support for Array.push in I [...]
February 14th, 2007 at 14:24
[...] Fã€ÂIEã€ÂOperaã€ÂSafari下åŒ时兼容的åš法æ¥骤： 1ã€Â定义函数getStyle – å‚考 [...]
March 22nd, 2007 at 21:47
What would be even more awesome is if this supported the css shorthand properties; e.g. for border. It would be very convenient to be able to just call getStyle(elem, “border”) and it would return “2px solid green” or whatever. Instead you’ve got to call getStyle() on {border-left-, border-top-, border-right-, border-bottom-} * {color, style, width}. Even if it wasn’t smart and didn’t build the most efficient shorthand it would be very useful.
March 23rd, 2007 at 8:58
Jonathan,
I agree that that would be good. As it is now, it just returns what the web browsers give you. However, it wpuld be a nice way to extend it, although it won’t be done just at this moment…
July 17th, 2007 at 21:24
Webkit has a bug in the way it handles the string passed to getPropertyValue() according to the spec the string passed, is case insenstive. I.e width==Width.
I have created at test case and reported it to webkit.
A workaround for now is making the strCssRule lowercase.
function getStyle(oElm, strCssRule){
var strValue = "";
strCssRule=strCssRule.toLowerCase();
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;
}
August 20th, 2007 at 17:28
This function doesn’t work in Firefox with “backgroundImage”.
September 6th, 2007 at 2:42
[...] computed styles in Javascript Robert Nyman has written a useful blog entry on this, you might want to read it as well. The getStyle() function is based on his, with one [...]
October 29th, 2007 at 11:03
Hi, nice script, i was using something similar but this seems more browser friendly. I have a suggestion and 1 bug for you to fix (if you want of course):
1. Stripping away the ‘px’ from the return values would be nice to be able to use it in mathematical operation
i did it the following way:
if(strValue.indexOf(“px”) != -1){ //stripping away ‘px’
strValue = parseInt( strValue.slice(0, strValue.indexOf(“px”)) );
}
return strValue;
2. There seems to be a bug with getting the border values. Even if the border is not set in css, i still get a 0px (medium in IE) and #000000 color for that border … is this normal?
Have a great day!
October 29th, 2007 at 11:05
o, forgot to mention, if i set the color property in css, the border color changes to that color, even if not set … annoying
October 29th, 2007 at 13:54
Olle,
Thanks for the info!
Bernie,
You need to send in
background-imageto the function, like in CSS. Alternatively, you can send in justbackgroundAndrei,
Thank you!
1. It’s a good suggestion, but it was a deliberate choice to have it return the unit as well, in case there are more than one unit in use.
2. The problem is that what is returned is the default value in the web browser, which can differ quite a lot between different web browsers.
November 7th, 2007 at 2:11
Thanks for this… exactly what I needed.
You absolute legend
November 7th, 2007 at 10:47
iain,
I’m glad it helped!
April 22nd, 2008 at 15:56
If you want to parse the entire css for document u can use this:
n=document.styleSheets[0].cssRules.length
css_rules=document.styleSheets[0].cssRules
i=0;
while(i<n){
console.log(css_rules[i].cssText)
i++;
}
May 15th, 2008 at 9:04
I’ve tried the script on my project….with Firefox works Fine!
With Explorer 7 does not works!!!
…..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
}
….The line “// Used to prevent an error in IE 5.0″ on statement catch Why is blank?
Have i to write some code in that line?
May 15th, 2008 at 9:36
Picmauri,
The script should work in IE 7, so make sure you don’t have any other error in there. The commented out line is only there to handle any potential error, so you can alert the value of e, to see what error you get.
May 15th, 2008 at 20:04
Hi Robert,
Now is work fine.
The problem was a mismatch on the background-color value….the color value of an element with firefox is expressed with rgb (xxx,xxx,xxx) , while with IE7 the same value is expressed with #xxxxxx. However i had some error with another script.
TNX
and sorry for my english….I’m from Italy!
May 16th, 2008 at 7:47
picmauri,
No problem at all. I’m glad to hear that it works for you now!
May 28th, 2008 at 16:22
For top and left it returns auto which is not very useful.
May 29th, 2008 at 18:32
Wow, this is an awesome tip! Thanks, that helped me solve a huge problem that I had been trying to figure out for a while, thanks!
May 30th, 2008 at 14:55
You saved my day!
June 18th, 2008 at 16:15
Reading this and that and those and what not, I come to one and only conclusion that is growing stronger and stronger everyday more.
That IE is a Browser – FX is a ridicule – while W3C is a godamn Dogma.
July 7th, 2008 at 20:26
[...] July 07, 2008 /* Gets the rendered style of an element. * Credit and thanks to: Robert’s Talk * Get the rendered style of an element – Robert’s talk – Web development and Internet trends * * Example usage: getStyle(document.getElementById(“container”), “font-size”); */ function [...]
July 24th, 2008 at 16:21
[...] Geist’s Blog /* Gets the rendered style of an element. * Credit and thanks to: Robert’s Talk * Get the rendered style of an element – Robert’s talk – Web development and Internet trends * * Example usage: getStyle(document.getElementById(“container”), “font-size”); */ function [...]
August 14th, 2008 at 6:52
Thank you! element.style.height didn’t work out for me and this helps! Thanks!
September 9th, 2008 at 16:09
[...] A continuación se muestra una función compatible con todos los navegadores, creada por el programador Robert Nyman y publicada en su blog personal: [...]
October 18th, 2008 at 19:16
Thanks for this tuto, this is exactly what I needed.
Good continuation
October 30th, 2008 at 13:31
[...] aquellos que quieran hacer modificaciones al estilo de su página de esta forma, la entrada original con el método adjunto en un fichero está en el blog de Robert [...]
November 21st, 2008 at 1:07
I can’t get this to work in Firefox 3 but all I’ve done is copied and pasted the code. I’ve put an alert in at the beginning and end of the function and I get the first one but not the second one. Any ideas?
November 21st, 2008 at 10:04
Rik,
Check if you get any JavaScript errors, and see what it states.
November 27th, 2008 at 5:27
[...] el blog de Robert Nyman encuentro el siguiente [...]
November 27th, 2008 at 5:32
I had to use the getter to get the style, getPropertyValue returned an empty string:
str = "strValue = document.defaultView.getComputedStyle(oElm, '')."+strCssRule;eval(str);
This happend on Firefox 3 under Ubuntu.
Found this code very useful.
December 12th, 2008 at 14:43
Hi,
Your function works as expected, but when I use it to test visibility of some elements for example, it returns “inherit”, while I expect a useful value.
What I would call a “rendered style” for visibility is either “visible” or “hidden”, and surely not “inherit”.
Is there any smart function to get the “actual rendered style”, or must I test each parent recursively until I find one that has not “inherit” for the given style ?
God job anyway
Regards,
Leto
December 12th, 2008 at 15:30
Leto 58,
Unfortunately, not out of the box. Most JavaScript libraries struggle with this too, but some of them have nice solutions. If you don’t want that, testing the code recursively is, as far as I know, the only option.
July 1st, 2009 at 17:09
[...] Robert Nyman [...]
November 25th, 2009 at 4:44
[...] Get the rendered style of an element [...]
December 7th, 2009 at 2:57
hi!
How do I read all the css properties of an element?
(so then reapplied to the page)
css properties that were defined in a “style” of course.
In other words, I want a function to reset the page after I’ve changed some way of using the DOM element. Thank you.
PS: I suppose it should work with nested loops.
December 7th, 2009 at 11:33
damvaz,
There’s no short solution to show the code here, but yes, just looping over style properties would do.
Alternatively, you could use the Inline Code Finder Firefox extension.
January 4th, 2010 at 17:21
Wow great !
I was looking for this regexpr for a while and I didn’t know it was possible to use an anonymous function to process the found string. good work !
Write a comment
Twitter reactions