如何使用 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;