在 HTML 中，有多种方式可以隐藏元素，比如使用 display: none;、visibility: hidden; 或者 opacity: 0; 等 CSS 属性，具体使用哪种方法取决于需求和效果。
下面是一个示例 HTML 页面，其中包含了使用 display: none; 和 visibility: hidden; 隐藏元素的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hide Elements Example</title>
<style>
.hidden {
display: none;
/* visibility: hidden; */
/* opacity: 0; */
}
</style>
</head>
<body>
<h1>Hide Elements Example</h1>
<p>Click the button to hide the image:</p>
<button onclick="hideImage()">隐藏图片</button>
<img id="myImage" src="https://www.itshiye.com/wp-content/uploads/2023/03/59cd91ff-cacd-4d54-8327-561e0e7d2003.jpg" alt="Random Image">
<p class="hidden">This paragraph is hidden using display: none;</p>
<p class="hidden">This paragraph is hidden using visibility: hidden;</p>
<script>
function hideImage() {
document.getElementById("myImage").style.display = "none";
// document.getElementById("myImage").style.visibility = "hidden";
// document.getElementById("myImage").style.opacity = "0";
}
</script>
</body>
</html>在上面的示例中，使用 CSS 的 display 属性和 visibility 属性来隐藏两个段落元素。同时，在 JavaScript 中使用 document.getElementById() 方法获取图片元素，然后根据需求设置不同的 CSS 属性值来隐藏图片元素。你可以注释掉其中一个方法，然后注释另一个方法来切换不同的隐藏方式。
正文完