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>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;
}
4 Answers
Reset to default 8The 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");
}
You want to use getComputedStyle():
function display(elem) {
return window.getComputedStyle(elem).display;
}
alert(display(document.getElementById("navmenu")));<div id="navmenu">
<p>This is a box of 250px * 250px</p>
</div>
<!--navmenu-->Here is a generic function for querying the display style of any element with getComputedStyle - it simplifies the interface a bit and caches the puted style object.
function getStyle(query) {
var elem = document.querySelector(query),
cs = window.getComputedStyle(elem,null);
return {
get : function(prop) {
return cs.getPropertyValue(prop);
}
}
}
Usage: just query the element using CSS selector for example in your case the the element has ID "navmenu", the query goes like
var s = getStyle( "#navmenu" );
s.get("display");
s.get("color"); // etc...
Works IE9+.
The HTMLElement.style property returns a CSSStyleDeclaration object that represents the element's style attribute. See the CSS Properties Reference for a list of the CSS properties accessible via style.
The style property is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute, not those that e from style rules elsewhere, such as style rules in the section, or external style sheets. To get the values of all CSS properties for an element you should use window.getComputedStyle() instead.
Source
so your solution is window.getComputedStyle()
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745502229a4630468.html
评论列表（0条）