Question

此脚本中的按钮应该能够使图像显示和消失。在第一次出现图像后，代码工作正常。我希望首先隐藏图像，当单击按钮时，我希望它可见，但是首先需要双击按钮，然后才能正常工作。这很烦人，我该怎么办呢？
代码：
（我知道这很简单，我昨天开始了）

＆＃13;

<!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>

＆＃13;

Answer 1

试试这个：

如果你隐藏了图片，那就是这样。

他们现在正在编码，你假设图像的初始状态是可见的。

因为第一次JavaScript读取图像的可见性状态时为null;

原因如同stack post：

反转你的if和else测试。 JavaScript无法读取CSS属性 来自样式，除非明确设置

＆＃13;

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

＆＃13;

#flyingcat {
visibility: hidden; 
}

＆＃13;

<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>

＆＃13;

Answer 2

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

Please check this answer out

Answer 3

使用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>

Answer 4

要使图像默认隐藏，并在双击按钮上切换隐藏/显示，请在脚本标记中使用以下代码。

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

</script>

并且通过更改

在按钮的双击事件上运行show（）函数

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

到

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

Answer 5

由空字符串设置的visibility属性，您可以将其内联编写，它将正常工作！

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

Answer 6

默认情况下，

x.style.visibility是空字符串。我切换了if语句的顺序，以显示图像onclick，除非它当前显示。

<!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");
        console.log([x.style.visibility])
        if (x.style.visibility === "visible") {
            x.style.visibility = "hidden";
        } else {
            x.style.visibility = "visible";
        }
    }
    
    </script>
    
    </html>

Answer 7

您只需在图像容器上添加一个事件监听器即可。无需添加css，也无需从div中传递函数。在你的脚本标签中，这就是你可以做的......这样你的JavaScript就可以驱动模板，而不是混合物。

// for getting the button
let button = document.querySelector('button');
// hiding the image div at first
document.getElementById('flyingcat').style.display = 'none';

// event listner on click
button.addEventListener('click', () => {
  // getting the image
  const image = document.getElementById('flyingcat');

  // toggle image display
  if (image.style.display === 'none') { // if the diplay is none
    image.style.display = 'block';      // making the image block
  } else image.style.display = 'none';  // else hiding the image again

});

我已对这些行进行了评论，以便您知道在什么时候做了什么......

我看到你使用了可见性：隐藏。让我告诉你，通过使用它，元素将存在，但它的可见性将是无，这意味着它将始终覆盖空间。但是通过使用display：none属性，我们可以从屏幕中删除整个元素。

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

7 个答案: