admin管理员组

文章数量:1427749

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;
}
  • javascript
  • html
  • css
Share Improve this question edited May 29, 2016 at 0:27 TylerH 21.1k79 gold badges79 silver badges114 bronze badges asked May 10, 2015 at 7:37 Ashfaque AhammedAshfaque Ahammed 734 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 8

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");
}

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()

本文标签： htmlMy CSS values does not reflect the values in my JavaScriptStack Overflow

版权声明：本文标题：html - My CSS values does not reflect the values in my JavaScript - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745502228a2661084.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。