divの余白の値を取得しますか？

Question

div32のマージンをJavaScriptで読み取ることができるかどうかは、そのマージンがexternal cssファイルに設定されているかどうかを調べようとしています。 これまでのところ、私はそれが（ないCSSファイルではなくHTML内）インラインスタイルとして書き込まれたときのdivの余白データを読み取ることができています：ここで

(function() { 
    var banner = document.getElementById('banner'); 
    var move = document.getElementById('box'); 

    banner.onclick = function() { 

    alert(move.style.marginLeft); 

    }; 
})(); 

がJSFiddleである：それはうまく機能 https://jsfiddle.net/b0kaLk1f/

が、 style="margin-left: 500px"を削除しても機能しなくなります。インラインスタイルからではなく、style.cssファイルからCSSデータを読みたいと思います。

Answer 1

Window.getComputedStyle()メソッドは、アクティブな値を適用し、その値に含まれる基本的な計算を解決した後、要素のすべてのCSSプロパティの値を返します。

(function() { 
 
    var banner = document.getElementById('banner'); 
 
    var move = document.getElementById('box'); 
 
    banner.onclick = function() { 
 
    var style = window.getComputedStyle(move, null); 
 
    alert(style.marginLeft); 
 
    }; 
 
})();

#box { 
 
    margin-left: 500px; 
 
    -webkit-transition: 0.5s; 
 
    transition: 0.5s; 
 
    background: #af0000; 
 
    width: 500px; 
 
    height: 300px; 
 
} 
 
#banner { 
 
    border: solid 1px #000; 
 
    overflow: hidden; 
 
    width: 500px; 
 
    height: 300px; 
 
}

<div id="banner"> 
 
    <div id="box"></div> 
 
</div>

Answer 2

基本的に、あなたは良いアイデアではありませんスタイルプロパティの形で状態を維持しようとしています。それらを取得して設定する必要があります。代わりに、クラスを使用して拡張バナーを前後に移動します。コードは短く簡単です：

banner.onclick = function() { 
    ext.classList.toggle('hide_extended_banner'); 
}; 

https://jsfiddle.net/b0kaLk1f/2/を参照してください。