web-dev-qa-db-ja.com

JavaScriptを使用して要素のパディング値を取得する方法は？

HTMLにtextareaがあります。ピクセル単位のパディング数値を整数または浮動小数点として取得する必要があります。 JavaScriptを使用して取得するにはどうすればよいですか？私はjQueryを使用していないため、純粋なJavaScriptソリューションを探しています。

javascripthtmlpadding
56
R. Dewi

これは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で機能します。

112
Šime Vidas

検索後、私は このリソース を見つけて、あなたがしたいことをしています。

彼らはあなたに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;
13
Chuck Callebs