Question

我试图从JavaScript中读取div的显示值（display:none;或display:block;）（div id =＆＃34; navmenu＆＃34;）。但是当我在相同的html文件中设置样式值时，我能够阅读，但是当我在链接的CSS样式表中设置样式值时，它不会读取（结果只是空白）。

＆＃13;

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

＆＃13;

enter image description here 和css

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

Answer 1

elem.style.display属性仅报告直接在DOM对象上设置的显示属性。它不会报告从样式表继承的样式。

要获得样式值，包括样式表中的样式值，您可以使用window.getComputedStyle()。

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

Answer 2

您想使用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-->

Answer 3

HTMLElement.style属性返回一个CSSStyleDeclaration对象，该对象表示元素的样式属性。有关可通过样式访问的CSS属性的列表，请参阅CSS属性参考。

style属性对于一般地学习元素的样式没有用，因为它只表示元素的内联样式属性中设置的CSS声明，而不是那些来自其他地方的样式规则的CSS声明。例如节中的样式规则或外部样式表。要获取元素的所有CSS属性的值，您应该使用window.getComputedStyle（）。

Source

所以你的解决方案是window.getComputedStyle()

Answer 4

这是一个用于查询getComputedStyle的任何元素的显示样式的通用函数 - 它简化了接口并缓存了计算出的样式对象。

function getStyle(query) {
  var elem = document.querySelector(query),
      cs = window.getComputedStyle(elem,null);
  return {
     get : function(prop) {
        return cs.getPropertyValue(prop);
     }
  }
}

用法：只使用CSS selector查询元素，例如在您的情况下元素具有ID“navmenu”，查询就像

var s = getStyle( "#navmenu" );

s.get("display");
s.get("color"); // etc...

使用IE9 +。

我的CSS值不反映我的JavaScript中的值

4 个答案: