Ashfaque Ahammed Ashfaque Ahammed - 6 months ago 11
HTML Question

My CSS values does not reflect the values in my JavaScript

I'm trying to read display value (

display:none;
or
display:block;
) of a div (div id="navmenu") from JavaScript. But when I set the style values in same html file I'm able to read, but when I set the style values in the linked CSS style sheet it does not read (result is just blank).



<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="navmenu">
<p>This is a box of 250px * 250px</p>
</div><!--navmenu-->
<!------------------------------------------------------------------->
<script>
function display(elem) {
return elem.style.display;
}
alert(display(document.getElementById('navmenu')));
</script>
<!------------------------------------------------------------------->
</body>
</html>





enter image description here
and css

#navmenu {
display:block;
width:250px;
height:250px;
background-color:#3CC;
}

Answer

The elem.style.display property only reports a display property that is set directly on the DOM object. It does not report a style that is inherited from a style sheet.

To get a style value including those from a style sheet, you can use window.getComputedStyle().

function display(elem) {
    return getComputedStyle(elem, null).getPropertyValue("display");
}
Comments