Javascript document.getElementById(...).style.display 为空
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6688638/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementById(...).style.display is blank
提问by ShrimpCrackers
function test( id )
{
alert( document.getElementById( id ).style.display );
}
What exactly does getElementById.style.display return? Is it an object, or a value? The alert shows nothing at all. I'm not using pure numbers for the id and it is unique.
getElementById.style.display 到底返回什么？它是一个对象，还是一个值？警报根本不显示任何内容。我没有使用纯数字作为 ID，它是唯一的。
采纳答案by Mike Figueroa
DOM methods like document.getElementById()create objects which point to- and contains certain details about- a specified HTMLElement or set of elements.
DOM 方法如document.getElementById()创建指向指定 HTMLElement 或元素集并包含有关其某些详细信息的对象。
Unfortunately the .styleproperty only knows about the style properties set using that same feature. In the example below, clicking what color?will not work until you have clicked change color.
不幸的是，该.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"> </div>
</body>
</html>
I recommend reading PKK's great page on getComputedStyle and currentStyle (IE, of course is different) http://www.quirksmode.org/dom/getstyles.html
我建议阅读 PKK 关于 getComputedStyle 和 currentStyle 的精彩页面（IE，当然是不同的）http://www.quirksmode.org/dom/getstyles.html
At the end of the tutorial, there is a very decent function for your purposes, although frameworks such as jQuery do provide very convenient & powerful functions for styling page elements: http://api.jquery.com/css/
在本教程的最后，有一个非常适合您的功能，尽管 jQuery 等框架确实为样式化页面元素提供了非常方便和强大的功能：http: //api.jquery.com/css/
回答by D. Fiore
Actually it is possible using window.getComputedStyle(element[, pseudoElt]).
实际上可以使用window.getComputedStyle(element[, pseudoElt]).
The method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.
在应用活动样式表并解析这些值可能包含的任何基本计算之后，该方法给出元素的所有 CSS 属性的值。
回答by Ibu
it displays the value that was dynamically set. if you want to find the current value you need the computed value. the same question was asked, check my answer here
它显示动态设置的值。如果要查找当前值，则需要计算值。提出了同样的问题，请在此处查看我的答案
回答by blankabout
Your snippet will only show a value for style.display if it has actually been set, it will not necessarily show default values.
您的代码段只会显示 style.display 的值，如果它确实已设置，则不一定显示默认值。
