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

时间:2011-03-08 03:13:06

标签: javascript html padding

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

2 个答案:

答案 0 :(得分:108)

这将返回padding-left值:

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

其中txt是对TEXTAREA元素的引用。

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

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

进一步阅读:https://developer.mozilla.org/en/DOM:window.getComputedStyle


顺便说一下,只是为了比较,这就是你使用jQuery完成同样工作的方法:

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

上述内容适用于IE6-8。

答案 1 :(得分:13)

搜索完成后,我发现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;