在HTML中，我们可以通过多种方式来控制图片的显示和隐藏，以下是一些常见的方法：
1、使用CSS样式控制
我们可以使用CSS的display属性来控制图片的显示和隐藏，display属性有四个值：block、inline、none和inline-block，当display属性设置为none时，元素会被隐藏；当设置为block或inline时，元素会显示出来。
我们可以创建一个id为"myImage"的图片元素，然后使用JavaScript来改变它的display属性：
<img id="myImage" src="image.jpg">
<button onclick="hideImage()">隐藏图片</button>
<button onclick="showImage()">显示图片</button>
<script>
function hideImage() {
document.getElementById("myImage").style.display = "none";
}
function showImage() {
document.getElementById("myImage").style.display = "block";
}
</script>
2、使用visibility属性控制
除了display属性，我们还可以使用visibility属性来控制图片的显示和隐藏，visibility属性有两个值：visible和hidden，当visibility属性设置为hidden时，元素会被隐藏；当设置为visible时，元素会显示出来。
我们可以创建一个id为"myImage"的图片元素，然后使用JavaScript来改变它的visibility属性：
<img id="myImage" src="image.jpg">
<button onclick="hideImage()">隐藏图片</button>
<button onclick="showImage()">显示图片</button>
<script>
function hideImage() {
document.getElementById("myImage").style.visibility = "hidden";
}
function showImage() {
document.getElementById("myImage").style.visibility = "visible";
}
</script>
3、使用opacity属性控制
我们还可以使用opacity属性来控制图片的透明度，从而达到隐藏图片的效果，opacity属性的值在0到1之间，0表示完全透明，1表示完全不透明。
我们可以创建一个id为"myImage"的图片元素，然后使用JavaScript来改变它的opacity属性：
<img id="myImage" src="image.jpg">
<button onclick="hideImage()">隐藏图片</button>
<button onclick="showImage()">显示图片</button>
<script>
function hideImage() {
document.getElementById("myImage").style.opacity = "0";
}
function showImage() {
document.getElementById("myImage").style.opacity = "1";
}
</script>
4、使用z-index属性控制
我们还可以使用z-index属性来控制图片的堆叠顺序，从而达到隐藏图片的效果，z-index属性的值越大，元素在堆叠顺序中的位置越高，如果一个元素的z-index属性值为负数，那么它会被堆叠顺序中位置更低的元素覆盖，从而被隐藏。
我们可以创建一个id为"myImage"的图片元素，然后使用JavaScript来改变它的z-index属性：
<img id="myImage" src="image.jpg">
<button onclick="hideImage()">隐藏图片</button>
<button onclick="showImage()">显示图片</button>
<script>
function hideImage() {
document.getElementById("myImage").style.zIndex = "-1";
}
function showImage() {
document.getElementById("myImage").style.zIndex = "0";
}
</script>
以上就是在HTML中让图片动态显示不出来的几种常见方法，需要注意的是，这些方法只能临时隐藏图片，如果刷新页面或者重新加载页面，图片又会显示出来，如果需要永久隐藏图片，可以考虑使用CSS或JavaScript来修改HTML代码。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/169393.html
微信扫一扫 