Question

我需要检查页面上header元素的display属性。在此基础上，将要进行不同的操作。我尝试使用

document.getElementsByTagName('header')[0].style.display

并将其与各种显示属性进行比较，但这是在我检查的属性中执行false部分。这是我的HTML：

<body>
    <header id="main">
        <p>Test to find the display property of an element (header in this case).</p>
    </header>
</body>

这是我的Javascript：

var test1 = document.createElement('div');
var test2 = document.createElement('div');

test1.innerText = 'Testing for block : ';
test2.innerText = 'Testing for none : ';

var body = document.getElementById('main');

if (document.getElementsByTagName('header')[0].style.display == 'block') {
    test1.innerText = test1.innerText + 'true part is executed';
    body.appendChild(test1);
} else {
    test1.innerText = test1.innerText + 'false part is executed';
    body.appendChild(test1);
}

if (document.getElementsByTagName('header')[0].style.display == 'none') {
    test2.innerText = test2.innerText + 'true part is executed';
    body.appendChild(test2);
} else {
    test2.innerText = test2.innerText + 'false part is executed';
    body.appendChild(test2);
}

我也把它放在jsfiddle http://jsfiddle.net/n8zDc/1/

上

我做错了什么？

Answer 1

您想使用window.getComputedStyle。您尚未在DOM

中的任何位置定义display属性值

var header = document.getElementById('main');
var style = window.getComputedStyle(header);
console.log(style.display);

原因是.style并不真正计算实际应用于该元素的样式，而只是计算DOM上的样式属性（HTML或通过JavaScript应用）。举个例子，考虑一下这个CSS：

* {
  float: right;
}

.foo {
  float: left;
}

和HTML：

<div>Foo</div>
<div class='foo'>Bar</div>

这些中都没有任何style值，但它们的计算样式将包含一堆值，浏览器默认值（如display: block）以及应用于它们的CSS规则。

如何检查header元素的display属性值？

1 个答案: