Document.getElementById (...). style.display is blank

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

What exactly does getElementById.style.display return? Is it an object or a value? The warning shows nothing. I do not use pure numbers for id, and it is unique.

+5
source share
4 answers

DOM methods, such as document.getElementById(), create objects that point to - and contain specific information about the - specified HTMLElement element or set of elements.

Unfortunately, a property .styleonly knows about style properties defined using the same function. In the example below, clicking what color?will not work until you click 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>

PKK getComputedStyle currentStyle (IE, , ) http://www.quirksmode.org/dom/getstyles.html

, , jQuery, : http://api.jquery.com/css/

+6
+1

Actually can be used window.getComputedStyle(element[, pseudoElt]).

The method gives the values ​​of all the properties of the CSS element after applying the active style sheets and resolving any basic calculation that these values ​​may contain.

+1
source

Only the style.display value will be displayed in your snippet, if it is really set, it will not necessarily show the default values.

0
source

All Articles