按钮需要点击 2 次才能换出 div

Question

单击按钮时，我有一个简单的 div 换出。但是，当页面首次加载时，需要用户单击按钮两次才能使该功能生效。之后一切正常。有什么建议吗？

我的代码：

<script type="text/javascript">
    function SwapDivsWithClick(div1, div2) {
        d1 = document.getElementById(div1);
        d2 = document.getElementById(div2);
        if (d2.style.display == "none") {
            d1.style.display = "none";
            d2.style.display = "block";
        } else {
            d1.style.display = "block";
            d2.style.display = "none";
        }
    }

</script>




<style>
    #swapper-other {
        width: 200px;
        height: 50px;
        background-color: darkred;
        color: #fff;
        display: none;
    }

    #swapper-first {
        width: 200px;
        height: 50px;
        background-color: yellowgreen;
        color: #444;
    }

</style>

 <div id="swapper-first">
    <p>
        <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
    </p>


    <p style="margin:0; color:red;">
        This div displayed when the web page first loaded.
    </p>
</div>
<div id="swapper-other">
    <a href="javascript:SwapDivsWithClick('swapper-first','swapper-other')">(Swap Divs)</a>
    <p>
        This div displayed when the link was clicked.
    </p>
</div>

Answer 1

当你在 if 之前执行 console.log(d2.style.display); 时，它不会显示任何内容（空字符串），至少在我的 chrome 中是这样。这就是为什么它不是 = "none"。因此 if (d2.style.display == "none") 不会计算为真。
更改为

if (d2.style.display != "block")

它会起作用的！

进一步调查：

console.log("typeof d2.style.display: "+typeof(d2.style.display));
console.log("length of d2.style.display: "+d2.style.display.length);
// OUTPUT:
// typeof d2.style.display: string
// length of d2.style.display: 0

进一步调查：
in css display: none; 将导致隐藏 div，但该值未在 js 中设置。
如果我在 display: xyz; 中放置类似 'xyz' 的内容，它会显示，但该值未在 js 中设置。如果我写 display: 'none'; div 没有隐藏（当然），但是 if 评估...
最后：我无法让 console.log(d2.style.display); 显示任何内容，除非它在引号中或通过 javascript 设置。

Answer 2

问题是你的 css 显示值没有被 JS d2.style.display 而是尝试以下

function SwapDivsWithClick(div1, div2) {
    d1 = document.getElementById(div1);
    d2 = document.getElementById(div2);
    style = getComputedStyle(d2);
    if (style.display == "none") {
        d1.style.display = "none";
        d2.style.display = "block";
    } else {
        d1.style.display = "block";
        d2.style.display = "none";
    }
}

这将在调用时获得 css。

Answer 3

为了在途中检测样式，您应该改用getComputedStyle方法。

下面使用您的示例更新了代码版本：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    #swapper-other {
        width: 200px;
        height: 50px;
        background-color: darkred;
        color: #fff;
        display: none;
    }

    #swapper-first {
        width: 200px;
        height: 50px;
        background-color: yellowgreen;
        color: #444;
    }

</style>
  <script type="text/javascript">
    function SwapDivsWithClick(div1, div2, e) {

        let d1 = document.getElementById(div1);
        let d2 = document.getElementById(div2);
        let computedStyleD1 = window.getComputedStyle(d1, null);
        let computedStyleD2 = window.getComputedStyle(d2, null);    
        if (computedStyleD2.display == "none") {             
            d1.style.display = "none";
            d2.style.display = "block";
        } else {
            d1.style.display = "block";
            d2.style.display = "none";
        }

      e.stopPropagation();         
    }

</script>
</head>
<body>
 <div id="swapper-first">
    <p>
        <a href='#' onclick="SwapDivsWithClick('swapper-first','swapper-other', event)">(Swap Divs)</a>
    </p>


    <p style="margin:0; color:red;">
        This div displayed when the web page first loaded.
    </p>
</div>
<div id="swapper-other">
    <a href='#' onclick="SwapDivsWithClick('swapper-first','swapper-other', event)">(Swap Divs)</a>
    <p>
        This div displayed when the link was clicked.
    </p>
</div>
</body>
</html>

按钮需要点击 2 次才能换出 div

Button requires 2 clicks to swap out div

javascript

visibility

toggle