Question

function test( id )
{
    alert( document.getElementById( id ).style.display );
}

getElementById.style.display究竟返回了什么？它是一个对象还是一个值？警报根本没有显示任何内容。我没有使用纯数字作为id，它是独一无二的。

Answer 1

像document.getElementById()这样的DOM方法会创建指向 - 并包含有关指定HTMLElement或元素集的某些细节的对象。

不幸的是，.style属性只知道使用相同功能设置的样式属性。在下面的示例中，点击what color?后，点击change color将无效。

<html>
<head>
<script>
function whatColor() {
    var d = document.getElementById( 'ddd' );
    alert( d.style.backgroundColor );
}
function changeColor() {
    var d = document.getElementById( 'ddd' );
    d.style.backgroundColor='orange';
}
</script>
<style>
#ddd {
    background-color:gray;
}
</style>
</head>
<body>
<input type="button" onclick="whatColor();" value="what color?" />
<input type="button" onclick="changeColor();" value="change color" />
<div id="ddd">&nbsp;</div>
</body>
</html>

我建议在getComputedStyle和currentStyle上阅读PKK的精彩页面（IE，当然是不同的）http://www.quirksmode.org/dom/getstyles.html

在本教程结束时，为了您的目的，有一个非常不错的功能，尽管jQuery之类的框架确实提供了非常方便的功能。样式化页面元素的强大功能：http://api.jquery.com/css/

Answer 2

显示动态设置的值。如果要查找当前值，则需要计算值。问了同样的问题，请在这里查看我的答案

Stackoverflow

Answer 3

实际上可以使用window.getComputedStyle(element[, pseudoElt])。

该方法在应用活动样式表并解析这些值可能包含的任何基本计算后，给出元素的所有CSS属性的值。

Answer 4

如果实际设置了样式，则您的代码段仅显示style.display的值，它不一定会显示默认值。

document.getElementById（...）。style.display为空

4 个答案: