为什么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有一个空style.display，即使它是display: none因为样式表;只有第二个和第三个div将style.display属性设置为任何内容：

＆＃13;

＆＃13;

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

＆＃13;

div {
    display: none;
}

＆＃13;

<h2>Divs:</h2>

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

<h2>Styles:</h2>

＆＃13;

＆＃13;

＆＃13;

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

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