按钮需要双击才能显示图像？
按钮需要双击才能显示图像？
提问于 2018-05-05 13:34:23
此脚本中的按钮应该能够使图像出现和消失。在第一次出现图像之后，代码运行良好。我希望图像首先被隐藏，当按钮被单击时，我希望它使其可见，但首先需要双击按钮，然后它才能正常工作。这很烦人，我该怎么解决它呢？
代码：
(我知道这很简单，我昨天就开始了)
<!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>
回答 7
Stack Overflow用户
发布于 2018-05-05 13: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>
Stack Overflow用户
发布于 2018-05-05 13:58:36
如果通过JS访问DOM元素(例如使用getElementById)，您将无法读取该元素的计算样式，因为它是在CSS文件中定义的。要避免这种情况，您必须使用属性getComputedStyle(或IE的currentStyle )。
Stack Overflow用户
发布于 2018-05-05 13: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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50186085
复制相关文章
相似问题
腾讯云开发者
