如何使用 JavaScript 获取元素的填充值?

我的 HTML 中有一个 textarea。我需要得到以像素为单位的整数或浮点数填充数值。我如何使用 JavaScript 获得它?我没有使用 jQuery,所以我在寻找纯 JavaScript 解决方案。

118632 次浏览

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;

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.