Search code examples
javascripthtmlpadding

How to get an element's padding value using JavaScript?

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.

Solution

  • 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.