獲取div的保證金值？

我試圖找出是否有可能用JavaScript讀取div的頁邊距，如果這些頁邊距設置在external css文件中。到目前爲止，我能讀div的極限數據，當它被寫成一個內嵌式的（不是在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數據，而不是從內聯樣式中讀取。

來源

2016-05-03 Rossitten

[__Window.getComputedStyle（）__]（https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle） – Rayon

爲什麼要這樣做？ –

@TJ - 我已經把所有主要的拼寫錯誤 – Rossitten

Window.getComputedStyle()方法在應用活動的stylesheets並解析這些值可能包含的任何基本計算後給出元素的所有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>

來源

2016-05-03 04:54:21 Rayon

這是一個X/Y問題，所以最好先問一下「X」是什麼。 –

人造絲 - 謝謝你！倒計時5分鐘接受你的ansewr。 – Rossitten

基本上你試圖在樣式屬性的形式，這是不是一個好主意，以保持狀態。你將不得不檢索它們並設置它們。相反，使用一個類來前後移動擴展橫幅。該代碼更短，更簡單：

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

請參閱https://jsfiddle.net/b0kaLk1f/2/。

來源

2016-05-03 06:02:47

謝謝，Torazaburo！事實上 - 這是一個明智的解決方案。與FF戰鬥雖然因爲某些原因FF不起作用 – Rossitten

獲取div的保證金值？

回答

相關問題