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

javascript html padding
R. Dewi picture R. Dewi · Mar 8, 2011 · Viewed 86.2k times · Source

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.

Answer

Šime Vidas picture Šime Vidas · Mar 9, 2011

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.

Related questions

How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More