web-dev-qa-db-ja.com

プレーンなJavaScriptでdivのマージン値を取得する方法は？

私はjQueryで高さを得ることができます

$(item).outerHeight(true);

しかし、どうやってJSを使うのですか？

私は李の高さを得ることができます

document.getElementById(item).offsetHeight

しかし、私はマージントップを試してみると常に「」を取得します：

document.getElementById(item).style.marginTop
javascriptmargin
41
YuC

styleオブジェクトのプロパティは、要素に直接適用されるスタイルのみです（たとえば、style属性を介して、またはコードで）。そう .style.marginTopには、その要素に特別に割り当てられたもの（スタイルシートなどで割り当てられていないもの）がある場合にのみ、何かが含まれます。

オブジェクトの現在の計算されたスタイルを取得するには、 currentStyle プロパティ（Microsoft）または getComputedStyle 関数（ほとんど他の皆）。

例：

var p = document.getElementById("target");
var style = p.currentStyle || window.getComputedStyle(p);

display("Current marginTop: " + style.marginTop);

公正な警告：返されるものはピクセル単位ではない場合があります。たとえば、IE9のp要素で上記を実行すると、"1em"。

ライブコピー | ソース

87
T.J. Crowder

この質問に対する答えを探していたときに、このサイトで非常に役立つものを見つけました。 http://www.codingforums.com/javascript-programming/230503-how-get-margin-left-value.html で確認できます。私を助けたのは次の部分です。

var e = document.getElementById('yourElement');
var marLeft = getStyle(e, 'margin-left');
alert(marLeft);
/* and if a number needs to be in px... */
alert(marLeft + 'px');

////////////////////////////////////

/***
 * get live runtime value of an element's css style
 *   http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element
 *     note: "styleName" is in CSS form (i.e. 'font-size', not 'fontSize').
 ***/
var getStyle = function (e, styleName) {
    var styleValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle) {
        styleValue = document.defaultView.getComputedStyle(e, "").getPropertyValue(styleName);
    }
    else if(e.currentStyle) {
        styleName = styleName.replace(/\-(\w)/g, function (strMatch, p1) {
            return p1.toUpperCase();
        });
        styleValue = e.currentStyle[styleName];
    }
    return styleValue;
}
8
Snake

また、HTML要素用に独自のouterHeightを作成できます。 IEで動作するかどうかはわかりませんが、Chromeでは動作します。おそらく、上記の回答で提案されているcurrentStyleを使用して、以下のコードを拡張できます。

Object.defineProperty(Element.prototype, 'outerHeight', {
    'get': function(){
        var height = this.clientHeight;
        var computedStyle = window.getComputedStyle(this); 
        height += parseInt(computedStyle.marginTop, 10);
        height += parseInt(computedStyle.marginBottom, 10);
        height += parseInt(computedStyle.borderTopWidth, 10);
        height += parseInt(computedStyle.borderBottomWidth, 10);
        return height;
    }
});

このコードを使用すると、次のようなことができます。

document.getElementById('foo').outerHeight

caniuse.com、getComputedStyle によると、メインブラウザ（IE、Chrome、Firefox）でサポートされています。

5
Fabio Montefuscolo