为什么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是通过点击访问一个弹出窗体。

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

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

Answer 1

你在CSS样式表中有什么与你的元素的style属性没有多大关系。 style属性只包含内联样式。请注意，在这段代码中，第一个div有一个空的style.display，即使它是display: none因为样式表;只有第二和第三格有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."); 
}