元素显示/隐藏切换：页面加载时图片默认显示问题求助

最稳妥的方法：CSS设置初始隐藏 #

直接给包裹图片的div加初始隐藏样式，JS逻辑不用改，按钮点击完全正常。

修改后的代码 #

CSS（可放在<head>内或单独样式文件）：

#myDIV3 {
    display: none;
}

HTML：

<button onclick="bassnectar()">Bassnectar</button>
<div id="myDIV3">
  <img src="/images/bassnectar.jpg">
</div>

JS保持你原有的代码即可：

function bassnectar() {
    var x = document.getElementById("myDIV3");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

另一种方法：修改JS逻辑兼容初始状态 #

如果不想加额外CSS，也可以改JS，判断元素的实际显示状态（而非仅看style.display，因为初始时该值为空）：

修改后的JS #

function bassnectar() {
    var x = document.getElementById("myDIV3");
    // 获取元素当前实际的显示状态
    var isHidden = window.getComputedStyle(x).display === "none";
    x.style.display = isHidden ? "block" : "none";
}

同时给HTML的div加上初始隐藏属性：

<button onclick="bassnectar()">Bassnectar</button>
<div id="myDIV3" style="display:none">
  <img src="/images/bassnectar.jpg">
</div>

为什么调换逻辑会出问题？ #

你之前把block和none调换后，第一次点击时，div的style.display是空的（初始没设置过），所以会走else分支把它设为block（显示），第二次点击才会隐藏，这就导致第一次点击的效果和预期相反，看起来像是按钮响应慢。本质是没考虑初始状态下style.display为空的情况，所以用CSS直接设置初始隐藏是最省心的方案。

内容的提问来源于stack exchange，提问作者MarcPowers