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

Question

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

Answer 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 中确实有效。

Answer 2

搜索后，我发现这个资源可以做你想做的事情。

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