Question

可能是一个重复的问题，但找不到答案。

element.style.display不是浏览器中呈现的内容。

它不返回实际值（即块或内联等），而是返回空。在Chrome 56.0.2924.87（64位）中测试。

如何获得实际渲染值？

＆＃13;

.top{
background-color:#FFF8DC;
}

＆＃13;

<div class="top">top (click it and it will disappear because its style.display is empty)</div>

＆＃13;

load-plugins=pylint.extensions.docparams

＆＃13;

Answer 1

CSS 无法使用CSS样式，除非以前在JavaScript中设置过它们，或者它们已被硬编码为内联样式。

改为使用 getComputedStyle() ：

function displayStyle(aEvent) {
  var target = aEvent.target;
  target.textContent = window.getComputedStyle(target).getPropertyValue('display');
}

window.onload = function() {
  var top_array = document.getElementsByClassName("top");
  for (var i = 0; i < top_array.length; i++) {
    top_array[i].addEventListener("click", displayStyle, false);
  }
}

.top {
  background-color: #FFF8DC;
}

<div class="top">top (click it and it will now show "block" since we're getting its computed style.)</div>

Answer 2

如果您直接在style属性中设置

，则可以使用

function displayStyle(aEvent) {
aEvent.target.textContent=aEvent.target.style.display;
}
window.onload = function() { 
var  top_array = document.getElementsByClassName("top");
for(var i = 0; i <  top_array.length; i++)
{
   top_array[i].addEventListener("click", displayStyle, false);
}
}

.top{
background-color:#FFF8DC;
}

<div class="top" style="display: block;">top (click it and it will disappear because its style.display is empty)</div>

Obs：在CSS上设置它也不起作用。

~~无论如何，我仍然不知道为什么。~~

现在我知道了，感谢Rick Hitchcock's answer。

element.style.display不是浏览器中呈现的内容

2 个答案: