Menu
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>
and css
#navmenu {
display:block;
width:250px;
height:250px;
background-color:#3CC;
}
649
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");
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
