javascript - プレーンJavaScriptでdivのマージン値を取得するには?

Question

jQueryで高さを取得できます

$(item).outerHeight(true);

しかし、どうすればJSを使用できますか?

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

document.getElementById(item).offsetHeight

しかし、margin-top を試すと、常に "" が表示されます。

document.getElementById(item).style.marginTop

Answer 1

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

オブジェクトの現在の計算されたスタイルを取得するには、currentStyleプロパティ (Microsoft) またはgetComputedStyle関数 (ほとんどすべて) を使用します。

例：

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

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

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

ライブコピー| ソース

Answer 2

outerHeightまた、独自の HTML 要素を作成することもできます。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) でサポートされています。

Answer 3

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

/***
 * 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;
}
////////////////////////////////////
var e = document.getElementById('yourElement');
var marLeft = getStyle(e, 'margin-left');
console.log(marLeft);    // 10px

#yourElement {
  margin-left: 10px;
}

<div id="yourElement"></div>

Answer 4

これが私の解決策です：

ステップ 1: 要素を選択する

ステップ 2: getComputedStyle を使用して要素を提供する

ステップ 3: すべてのプロパティにアクセスする

const item = document.getElementbyId('your-element-id');
const style= getComputedStyle(item);
const itemTopmargin = style.marginTop;
console.log(itemTopmargin)

不要な「16px」のようなpx単位のマージンが得られます。を使用して値を抽出できますparseInt()

const marginTopNumber = parseInt(itemTopmargin)
console.log(marginTopNumber)

数値のみが表示されます（単位はありません）。