How can I get the inherited CSS value using Javascript?

Question

I'm trying to get the value of an inherited CSS property using Javascript. I haven't been able to find a comprehensive answer.

Example CSS:

div {
    width: 80%;
}

Example Markup:

<div id="mydiv"> Some text </div>

Using javascript (jQuery, or native), I need to get the width of the element-- not in pixels, but the string "80%".

$('#mydiv').css('width'); // returns in px
$('#mydiv')[0].style.width // empty string
getComputedStyle($('#mydiv')[0]).width // returns in px

The reason I need the value as a string is because I need to copy the style to another element. If it's declared as a percent, the other value needs to be a percent. If it's declared in px, the other value needs to be in px.

The real trick is that this property could be inherited, not declared explicitly on the element (as in my example).

Does anyone have any ideas?

Possible duplicate [Inherited CSS Values via Javascript](http://stackoverflow.com/questions/1169967/inherited-css-values-via-javascript) — Martin, Mar 15 '12 at 23:46
Not only do you have the issue if needing to get an inherited value, you also need to get a % value, which is far from simple: http://stackoverflow.com/questions/7131462/getting-values-of-global-stylesheet-in-jquery/7132264#7132264 — maxedison, Mar 15 '12 at 23:49
@Martin : It's not quite a duplicate... I did see that answer, but I need the % value. — t3rminus, Mar 16 '12 at 04:12

Bergi · Answer 1 · 2012-03-16T00:25:29.650

5

What you are searching for is this quirksmode.org article. It proposes the function

function getStyle(el, styleProp)    {
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

Still, you should read that article carefully. They names of the styleProps are not really cross-browser, and you will see how different browsers handle this. Opera seems to have the best support for reporting the correct values.

edited Mar 16 '12 at 00:25

answered Mar 16 '12 at 00:10

Bergi

630,263
148
957
1,375

This is a library, and it doesn't officially support the latest browser versions. – Jivings Mar 16 '12 at 00:15
I cant see why one example function would be a library? – Bergi Mar 16 '12 at 00:17
I suppose it isn't, it just appeared to be. Why not just post the code snippet in your answer instead of linking to it? Then I'll remove my downvote. – Jivings Mar 16 '12 at 00:19
1

Because the article describes the pitfalls of the snippet. Also, it may get updated - my post won't. I think it would be better to link to the origin, than spread unmaintained, source-less code snippets :) – Bergi Mar 16 '12 at 00:29
@Bergi I've been over that article. It was tough to follow, and you & the article both mentioned there are problems with the method being not cross-browser compatible. Thanks for the help, though! – t3rminus Mar 16 '12 at 04:17
yeah, but for a simple "width" it will work. You may get into trouble with shorthand properties (border, background) or CSS vs. JS property names. – Bergi Mar 16 '12 at 15:44

score 3 · Accepted Answer · answered Mar 15 '12 at 23:50

3

There's no way to get the percentage value I'm afraid. You can try something like this:

var widthpx = getComputedStyle($('#mydiv')[0]).width;
var parentWidth = $('#mydiv').parent().css('width')

var width = ( 100 * parseFloat(widthpx) / parseFloat(parentWidth) ) + '%';

answered Mar 15 '12 at 23:50

Jivings

22,834
6
60
101

that it would be not possible. There are ways, even without jQuery. – Bergi Mar 16 '12 at 00:20
Hm... not quite what I'm looking for. A co-worker actually suggested this. You're probably right in that there's no way to get the percentage, which answers my question. Thanks. – t3rminus Mar 16 '12 at 04:10

score 0 · Answer 3 · answered Mar 15 '12 at 23:49

0

get the offSetWidth of the element, and the offsetWidth of its offsetParent, and calculate the percentage from the two integers.

answered Mar 15 '12 at 23:49

kennebec

102,654
32
106
127

score 0 · Answer 4 · answered Mar 15 '12 at 23:50

This binds an event handler to an element for the click event and alerts the element's relative width compared to it's parent element.

$('#mydiv').on('click', function () {

    //element width divided by parent width times 100 to make a percentage
    alert(Math.round($(this).width() / $(this).parent().width() * 100) + '%');
});

Here is a demo: http://jsfiddle.net/X67p5/

How can I get the inherited CSS value using Javascript?

4 Answers4

Linked