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


72

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

Answers:


143

这将返回padding-left值:

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

txt对TEXTAREA元素的引用在哪里。

以上适用于所有现代浏览器和IE9。但是,它在IE8及以下版本中不起作用。

现场演示: http : //jsfiddle.net/simevidas/yp6XX/

进一步阅读:https : //developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle


顺便说一句,为了进行比较,这就是使用jQuery完成相同工作的方式:

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

上面的方法在IE6-8中有效。


23
要获取数值,请务必将结果传递给parseFloat,例如parseFloat(window.getComputedStyle(txt, null).getPropertyValue('padding-left'))
reubano

2
第二个参数getComputedStyle是可选的。不用了

@ user670839是正确的,但未能提供详细信息。第二个参数用于定位伪元素,例如::after。也就是说,可能会发出第二个参数,但usingnull也有效。
Tanckom

16

搜索后,我发现此资源可以完成您想要的工作。

他们希望您添加一个javascript函数:

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

然后调用这样的函数以获得特定的样式:

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

其中“容器”是元素的ID,“字体大小”是属性名称。如果可以保证元素上的所有CSS都是内联的,则此解决方案会更干净:

document.getElementById("container").style.paddingRight;

4
该功能不适用于的速记属性padding。您必须分别阅读各个组件。在这里看到:jsfiddle.net/simevidas/yp6XX/1
森那维达斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.