html 图片隐藏与显示代码是什么？ (css 控制 + 事件触发 + 不同浏览器兼容)
通过 CSS 的 display 属性隐藏图片
可以通过将图片的 display 属性设置为 none 来隐藏图片。以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
img {
display: none;
}
</style>
</head>
<body>
<img src="your_image.jpg" alt="Your Image">
</body>
</html>
在上述代码中，通过 CSS 选择器选择了所有的 <img> 元素，并将其 display 属性设置为 none，从而隐藏了图片。
通过 CSS 的 visibility 属性隐藏图片
visibility 属性也可以用于隐藏图片，但与 display 属性不同的是，hidden 的元素仍然占据空间。以下是示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
img {
visibility: hidden;
}
</style>
</head>
<body>
<img src="your_image.jpg" alt="Your Image">
</body>
</html>
在这个例子中，将图片的 visibility 属性设置为 hidden，图片将被隐藏，但仍然占据页面的空间。
使用 JavaScript 触发图片显示与隐藏
通过 JavaScript，可以更灵活地控制图片的显示与隐藏。以下是一个简单的示例代码：
<!DOCTYPE html>
<html>
<head>
<script>
function showImage() {
var image = document.getElementById("myImage");
image.style.display = "block";
}
function hideImage() {
var image = document.getElementById("myImage");
image.style.display = "none";
}
</script>
</head>
<body>
<img id="myImage" src="your_image.jpg" alt="Your Image" style="display: none;">
<button onclick="showImage()">显示图片</button>
<button onclick="hideImage()">隐藏图片</button>
</body>
</html>
在上述代码中，通过 JavaScript 函数 showImage 和 hideImage 来控制图片的显示与隐藏。当点击相应的按钮时，相应的函数将被调用，修改图片的 display 属性。
需要注意的是，不同浏览器对于 CSS 和 JavaScript 的支持程度可能会有所不同，在实际应用中需要进行兼容性测试。
通过 CSS 的 display 属性和 visibility 属性，以及 JavaScript 的事件触发，可以实现 HTML 图片的隐藏与显示。在实际开发中，可以根据具体需求选择合适的方法，并注意浏览器兼容性问题。
以下是提炼的问题： 1. CSS 中 display 属性和 visibility 属性在隐藏图片时有什么区别？ 2. 如何使用 JavaScript 实现图片的显示与隐藏？ 3. 在不同浏览器中，实现图片隐藏与显示的代码兼容性如何？ 4. 有没有其他方法可以实现 HTML 图片的隐藏与显示？