How do I obtain specific styles from a CSS style sheet using JavaScript?

Question

I've tried element.style.getPropertyValue but that only obtains the text within the style attribute of the element. How would I get properties and values from the style element?

Answer 1

You can get the full style for the element, including styles it's been assigned by style sheets, via the getComputedStyle function on most browsers, or via the currentStyle property on IE. (Note that one of those is a function, the other is a property.)

---

There are a number of browser idiosyncrasies around computed styles. This is one of the things I'd use a good library for, something like jQuery, Prototype, YUI, Closure, or any of several others. That way you're leveraging the work (and most importantly, workarounds) other people have already done. Just to give one example: Some versions of WebKit (the renderer used by Chrome and Safari) mis-report the margin-right property in some situations. jQuery tests to see if that's the case and, if so, works around it for you. I don't know how many of the others work around that specific issue, but you get the idea.

Answer 2

You can try with:

function getStyle(element, styleProperty) {
 if (element.currentStyle)
 return element.currentStyle[styleProperty];
 else if (window.getComputedStyle)
 return document.defaultView.getComputedStyle(element, null).getPropertyValue(styleProperty);
 return value;
}