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.
Add a comment
|
2 Answers
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.
6 Comments
reubano
to get the numerical value, be sure to pass the result to
parseFloat, i.e., parseFloat(window.getComputedStyle(txt, null).getPropertyValue('padding-left'))
Advena
@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.
mirabilos
Nope, this results in a String such as
"3px", i.e. including units.
stephband
This will fail if the padding-left contains a calc()
|
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;
1 Comment
Šime Vidas
That function doesn't work for shorthand properties like
padding. You have to read the individual components separately. See here: jsfiddle.net/simevidas/yp6XX/1