我的CSS值不反映我的JavaScript中的值 [英] My CSS values does not reflect the values in my JavaScript
问题描述
我正在尝试读取显示值（ display：none; 或 display：block; ）来自JavaScript的div（div id =navmenu）。但是当我在相同的html文件中设置样式值时，我能够阅读，但是当我在链接的CSS样式表中设置样式值时，它不会读取（结果只是空白）。
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>
和css
and css
#navmenu {
display:block;
width:250px;
height:250px;
background-color:#3CC;
}
推荐答案
elem.style.display 属性仅报告直接在DOM对象上设置的显示属性。它不会报告从样式表继承的样式。
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.
要获取样式值，包括样式表中的样式值，可以使用 window.getComputedStyle（）
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");
}
这篇关于我的CSS值不反映我的JavaScript中的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
