26

の結果にはgetComputedStyle「margin」という名前のプロパティが含まれますが、""Mozilla Firefox または Apple Safari ではプロパティは常に空の文字列 ( ) です。ただし、Internet Explorer (および Google Chrome) では、margin プロパティに予期される値が含まれています (IE 6 でも)。getPropertyValue("margin")返されたオブジェクトのメソッドを使用すると、同じ結果が返されます。

Firefox と Safari でマージンの計算値を取得するにはどうすればよいですか?

var el = document.body.appendChild(document.createElement('div'));
el.style.margin = '2px';
console.log(getComputedStyle(el, null).margin === ""); // false in IE and Chrome
console.log(getComputedStyle(el, null).getPropertyValue("margin") === ""); // same

4

4 に答える 4

43

このgetComputedStyle()関数は、省略形のプロパティ( 、 など)の値を評価するのではなく、長いプロパティ ( 、margin、など) のみを評価する必要があります。省略形のプロパティの場合、空の文字列のみを返す必要があります。paddingmargin-topmargin-bottompadding-top

var el = document.body.appendChild(document.createElement('div'));
el.style.margin = '2px';
var computed = getComputedStyle(el);

var longhands = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'];
longhands.forEach(function(e) { console.log(e + ': ' + computed.getPropertyValue(e)) });

さらに、インターネット エクスプローラーを使用するクロスブラウザー ソリューションについては、このリンクを参照してください。currentStyle

于 2013-09-07T17:30:33.783 に答える