使用javascript的图像可见性

Image visibility using javascript

本文关键字：可见性 图像 javascript 使用      更新时间：2023-09-26

我想使用 if-else 切换图像，但它不起作用，有人可以解释一下代码有什么问题吗？

<img src="img/somepic.jpg" id="pic"><br/>
<a href="javascript:toggleImg()">Toggle Image</a>
<script>
function toggleImg(){
    var img = document.getElementById('pic');
    var checkForVisible = img.style.visibility == "visible";
    if(checkForVisible == "visible"){
        img.style.visibility = "hidden";
    }
    else{
        img.style.visibility = "visible";
    }
}
</script>

我尝试使用"三元运算符"

img.style.visibility = checkForVisible ? "hidden" : "visible";

它奏效了。我只是想知道不起作用的"if-else"代码。谢谢

你这样做：

var checkForVisible = img.style.visibility == "visible";

=="可见"使它成为等于表达式的结果，因此它将是真或假。

你的if/else是checkForVisible =="visible"，这将不起作用，因为is只会是真的或假的。您只需要比较一次。

if(img.style.visibility == "visible"){
        img.style.visibility = "hidden";
    }
    else{
        img.style.visibility = "visible";
    }

使用 toggle 而不是 if else 。

function toggleImg() {
  var img = document.getElementById('pic');
  img.classList.toggle('hidden');
}
.visible {
  display: block;
}
.hidden {
  display: none;
}
<img src="img/somepic.jpg" id="pic">
<br/>
<a href="javascript:toggleImg()">Toggle Image</a>

有错误。例如，在检查可见变量中。我不确定你想做什么，但有太多的平等。你可以试试这个：

function toggleImg(){
    var img = document.getElementById('pic');
    img.style.visibility = "visible";
    if(img.style.visibility === "visible"){
        img.style.visibility = "hidden";
    }
    else{
        img.style.visibility = "visible";
    }
}
相关文章：