为什么style.display的值未定义？

Question

元素的style.display返回值undefined的原因可能是什么？

在我的Javascript中，我有一个if语句检查

if (document.getElementById("myModal").style.display != 'none'){ 
    console.log("The pop up is visible.");
    do something
}

在我的CSS中，将myModal设置为display: none;

myModal是可通过单击访问的弹出表单。

我将js文件的<script>移到了HTML的底部，这是否可以确保在运行javascript之前已完全加载DOM？ 但是，即使不满足条件（即使弹出窗口当前不可见），也会在页面加载后立即显示console.log 。

不确定Leaflet API是否与此有关？

Answer 1

CSS样式表中的内容与元素的style属性无关。 样式属性仅包括嵌入式样式。 请注意，在此代码中，第一个div如何display: none为空style.display ，即使它是display: none因为样式表，所以display: none ； 只有第二个和第三个div的style.display属性设置为任意值：

 const divs = document.querySelectorAll( 'div' ); [].forEach.call( divs, div => document.body.innerHTML += div.style.display + '<br>' ); 

 div { display: none; } 

 <h2>Divs:</h2> <div>One</div> <div style="display:none;">Two</div> <div style="display:block;">Three</div> <h2>Styles:</h2> 

如果要获取元素的计算样式，请考虑所有样式表和内联样式，可以使用getComputedStyle 。 或者，您可以只使用jQuery：

if ( $('#myModal').is(':visible') ) {
    console.log("The pop up is visible.");
}