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

Posted 2023-03-06

【中文标题】如何使用 JavaScript 获取元素的填充值？

【英文标题】：How to get an element's padding value using JavaScript?

【发布时间】：2011-07-10 19:39:04

【问题描述】：

我的 html 中有一个 textarea。我需要以整数或浮点数的形式获取以像素为单位的填充数值。如何使用 javascript 获取它？我没有使用 jQuery，所以我正在寻找纯 JavaScript 解决方案。

【参考方案1】：

这将返回 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 中确实有效。

【讨论】：

要获取数值，一定要将结果传递给parseFloat，即parseFloat(window.getComputedStyle(txt, null).getPropertyValue('padding-left'))

getComputedStyle 的第二个参数是可选的。你不需要它。

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

【参考方案2】：

经过搜索，我找到了 this resource 来做你想做的事情。

他们希望你添加一个 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");

其中“container”是元素的 id，“font-size”是属性名称。如果你能保证元素上的所有 CSS 都是内联的，那么这个解决方案会更干净：

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

【讨论】：

该函数不适用于像padding 这样的速记属性。您必须单独阅读各个组件。见这里：jsfiddle.net/simevidas/yp6XX/1