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

问题是您的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 2

为了检测途中的样式，应改用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>

Answer 3

当您在console.log(d2.style.display);之前执行操作时，至少在我的浏览器中它什么也不会显示（空字符串）。这就是为什么它不是= "none"的原因。结果，if (d2.style.display == "none")的评估结果为true。
更改为

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

甚至进一步调查：
在CSS display: none;中将导致隐藏的div，但未在js中设置该值。
如果我在display: xyz;中放入“ xyz”之类的内容，则会显示出来，但是js中未设置该值。如果我写display: 'none';，则div不会被隐藏（当然），但是if会计算...
最后：除非用引号引起来或通过javascript设置，否则我无法让console.log(d2.style.display);显示任何内容。

按钮需要2单击以替换div

3 个答案: