问按钮需要双击才能显示图像？
EN

Stack Overflow用户

提问于 2018-05-05 05:34:23

回答 7查看 609关注 0票数 1

此脚本中的按钮应该能够使图像出现和消失。在第一次出现图像之后，代码运行良好。我希望图像首先被隐藏，当按钮被单击时，我希望它使其可见，但首先需要双击按钮，然后它才能正常工作。这很烦人，我该怎么解决它呢？

代码：

(我知道这很简单，我昨天就开始了)

<!DOCTYPE html>
     <html>
    <meta charset= "utf-8">
    <head>
    
    <title>cat</title>
    
    <style>
    
    #flyingcat {
    visibility: hidden; 
    }
    
    </style>
    
    </head>
    
    <body> 
    
    <button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>
    
    <div id="flyingcat">
    <img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
     <p>hey</p>
    </div>
    
    </body>
    
    <script>
    
    function show() {
        var x = document.getElementById("flyingcat");
        if (x.style.visibility === "hidden") {
            x.style.visibility = "visible";
        } else {
            x.style.visibility = "hidden";
        }
    }
    
    </script>
    
    </html>

css

button

javascript

html

有奖征集｜云上CPU玩转AIGC挑战赛

参加活动赢取洛斐键盘、小米电纸书、智能音响等鹅厂周边！

回答 7

Stack Overflow用户

发布于 2018-05-05 05:45:02

试试这个：

这是如果你开始隐藏图像的话。

按照你现在编码的方式，你假设图像的初始状态是可见的。

因为当JavaScript第一次读取图像的可见性状态时，它为空；

原因如下所示:在stack post中

反转你的if和else测试。JavaScript无法从样式中读取CSS属性，除非它显式地将其设置为

    function show() {
        var x = document.getElementById("flyingcat");
        if (x.style.visibility == "visible") {
            x.style.visibility = "hidden";
        } else {
            x.style.visibility = "visible";
        }
    }

#flyingcat {
visibility: hidden; 
}

<button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>

<div id="flyingcat">
<img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
 <p>hey</p>
</div>

票数 1

Stack Overflow用户

发布于 2018-05-05 05:58:36

如果通过JS访问DOM元素(例如使用getElementById)，您将无法读取该元素的计算样式，因为它是在CSS文件中定义的。要避免这种情况，您必须使用属性getComputedStyle(或IE的currentStyle )。

Please check this answer out

票数 1

Stack Overflow用户

发布于 2018-05-05 05:44:17

使用CSS设置的样式在JavaScript中不可见。您需要先通过JS分配样式，然后再调用您的函数来切换可见性。

下面是一个有效的演示：

var style = document.getElementById("flyingcat").style;
style.visibility = 'hidden';

function show() {
  style.visibility = style.visibility === 'hidden' ? 'visible' : 'hidden';
}

<button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>

<div id="flyingcat">
  <img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
  <p>hey</p>
</div>

另一种方法是使用getComputedStyle()，然后使用getPropertyValue()获取属性值。这样，您的代码不需要做太多更改。

function show() {
  var x = document.getElementById("flyingcat");
  var styles = getComputedStyle(x, null);
  
  if (styles.getPropertyValue('visibility') === "hidden") {
    x.style.visibility = "visible";
  } else {
    x.style.visibility = "hidden";
  }
}

#flyingcat {
  visibility: hidden;
}

<button onclick="show()">KΛΙΚ ΓΙΑ ΝΟΥΝΤΖ</button>

<div id="flyingcat">
  <img src="http://i0.kym-cdn.com/entries/icons/original/000/002/232/bullet_cat.jpg"> <br>
  <p>hey</p>
</div>