[英]My CSS values does not reflect the values in my JavaScript
我正在尝试从JavaScript中读取div（div id =“navmenu”）的显示值（ display:none;或display:block; ）。 但是当我在相同的html文件中设置样式值时，我能够阅读，但是当我在链接的CSS样式表中设置样式值时，它不会读取（结果只是空白）。
<!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
#navmenu {
display:block;
width:250px;
height:250px;
background-color:#3CC;
}
elem.style.display属性仅报告直接在DOM对象上设置的显示属性。 它不报告从样式表继承的样式。
要获取样式值，包括样式表中的样式值，可以使用window.getComputedStyle() 。
function display(elem) {
return getComputedStyle(elem, null).getPropertyValue("display");
}
你想使用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-->
HTMLElement.style属性返回一个CSSStyleDeclaration对象，该对象表示元素的样式属性。 有关可通过样式访问的CSS属性的列表，请参阅CSS属性参考。
style属性对于一般学习元素的样式没有用，因为它只表示元素的内联样式属性中设置的CSS声明，而不是来自其他地方样式规则的CSS声明，例如节中的样式规则或外部样式床单。 要获取元素的所有CSS属性的值，您应该使用window.getComputedStyle（）。
所以你的解决方案是window.getComputedStyle()
这是一个使用getComputedStyle查询任何元素的显示样式的通用函数 - 它简化了接口并缓存了计算出的样式对象。
function getStyle(query) {
var elem = document.querySelector(query),
cs = window.getComputedStyle(elem,null);
return {
get : function(prop) {
return cs.getPropertyValue(prop);
}
}
}
用法：只使用CSS选择器查询元素，例如在您的情况下元素具有ID“navmenu”，查询就像
var s = getStyle( "#navmenu" );
s.get("display");
s.get("color"); // etc...
适用于IE9 +。
当我通过jQuery / javascript传递条件单选按钮时，为什么CSS样式表无法反映？
[英]Why does my CSS stylesheet not reflect when I pass conditional radio buttons through jQuery/javascript?
我可以在CSS文件中使用通过Javascript获取的变量值吗？
[英]Can I use variable values acquired with Javascript in my css file?
"<i>Recursion forEach does not update my values?<\/i>递归 forEach 不会更新我的值？<\/b> <i>using Javascript<\/i>使用 Javascript<\/b>"
[英]Recursion forEach does not update my values? using Javascript
我的JavaScript处理我的表单并重定向我，但是它没有将输入值发布到重定向到的php文件中
[英]my javascript processes my form and redirects me but it does not post the input values in the php file it redirects to
内插值不反映 Angular 应用程序中的最新值
[英]Interpolated values does not reflect the latest values in an Angular app
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.