使用 obj.style.marginTop 获取 margin-top 失败，但如果首先明确设置 marginTop，它就可以工作

Question

请先查看这个问题：

document.body.style.marginTop returning blank string in JS

有几个可行的解决方案......然后是我的可行解决方案：

https://stackoverflow.com/a/34473070/2813224

总结：

尝试通过执行以下代码及其变体来获取 div 的 margin-top 值：

/*~~~~~~~~~~~~~~~~~~~[ Attempt 1 ]~~~~~~~~~~~~~~~~~~~~~~~~*/

alert(document.getElementById("testDiv").style.marginTop);

/*~~~~~~~~~~~~~~~~~~~[ Attempt 2 ]~~~~~~~~~~~~~~~~~~~~~~~~*/

var tDiv = document.getElementById('testDiv');
var tMgn = tDiv.style.marginTop;
alert(tMgn);

/*~~~~~~~~~~~~~~~~~~~[ Attempt 3 ]~~~~~~~~~~~~~~~~~~~~~~~~*/

var tDiv = document.querySelector('testDiv');
alert(tDiv.style.marginTop);

/*~~~~~~~~~~~~~~~~~~~[ Attempt 4 ]~~~~~~~~~~~~~~~~~~~~~~~~*/

function mTop() {
   var tDiv = document.getElementById('testDiv');
   var tMgn = tDiv.style.marginTop;
   alert(tMgn);
}
mTop();

这些组合的共同点是.style.marginTop。此后不久，操作员的问题是answered。

我的问题是：

我不知道为什么，但我首先通过 JS 显式分配 margin-top 使其工作。我从来不需要首先设置样式值来获取样式值，特别是如果它已经由 CSS 设置。为什么会这样简单：

alert(document.getElementById("testDiv").style.marginTop);  

不起作用，但这样做：

document.getElementById("testDiv").style.marginTop = "50px";
alert(document.getElementById("testDiv").style.marginTop);

当 CSS 已经存在时：

#testDiv { margin-top: 50px; }

?

我的工作答案片段：

document.getElementById("testDiv").style.marginTop = '50px';
document.body.style.marginTop = '100px';
alert(document.getElementById("testDiv").style.marginTop);
alert(document.body.style.marginTop);

body {
  margin-top: 100px;
}
#testDiv {
  margin-top: 50px;
}

hi!

<div id="testDiv">test</div>

Answer 1

您需要使用window.getComputedStyle 来获取计算出来的样式，但不是通过JavaScript 设置的，因为HTMLElement.style 只能获取内联样式。

语法是：

var style = window.getComputedStyle(element[, pseudoElt]);

所以在你的情况下，它应该是：

var elem = document.getElementById("testDiv");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("margin-top");
document.getElementById("output").innerHTML = theCSSprop;