108

I have a textarea in my HTML. I need to get the padding numerical value in pixels as either integer or float. How can I get it using JavaScript? I am not using jQuery, so I'm looking for pure JavaScript solutions.

YakovL
  • 7,557
  • 12
  • 62
  • 102
R. Dewi
  • 4,141
  • 9
  • 41
  • 66

2 Answers2

207

This will return the padding-left value:

window.getComputedStyle(txt, null).getPropertyValue('padding-left')

where txt is the reference to your TEXTAREA element.

The above works in all modern browsers and in IE9. However, it does not work in IE8 and below.

Live demo: http://jsfiddle.net/simevidas/yp6XX/

Further reading: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Btw, just for comparison, this is how you get the same job done using jQuery:

$(txt).css('padding-left')

The above does work in IE6-8.

matharden
  • 757
  • 6
  • 15
Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
  • 42
    to get the numerical value, be sure to pass the result to `parseFloat`, i.e., `parseFloat(window.getComputedStyle(txt, null).getPropertyValue('padding-left'))` – reubano Dec 17 '16 at 09:00
  • 5
    The 2nd arg on `getComputedStyle` is optional. You don't need it. –  Apr 02 '20 at 23:16
  • 3
    @user670839 is correct but failed to provide details. The second argument is used to target pseudo elements, such as `::after`. I.e. the 2nd argument may be emitted but using `null` is valid too. – Advena Dec 02 '20 at 09:22
  • Nope, this results in a String such as `"3px"`, i.e. including units. – mirabilos Jan 18 '23 at 04:52
  • For better documentation, here: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle – Alberto Manuel Jun 22 '23 at 18:28
19

After a search, I found this resource to do what you're looking to do.

They want you to add a javascript function:

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;
}

And then call the function like this to obtain the particular style:

getStyle(document.getElementById("container"), "padding-right");

Where "container" is the id of the element and "font-size" is the property name. If you can guarantee that all the CSS on the element will be inline then this solution would be cleaner:

document.getElementById("container").style.paddingRight;
Chuck Callebs
  • 16,293
  • 8
  • 56
  • 71
  • 4
    That function doesn't work for shorthand properties like `padding`. You have to read the individual components separately. See here: http://jsfiddle.net/simevidas/yp6XX/1/ – Šime Vidas Mar 09 '11 at 03:07