html - 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>

<!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;
}

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 Ahammed 734 bronze badges

Add a ment |

4 Answers 4

Sorted by: 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()

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - My CSS values does not reflect the values in my JavaScript - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)