html 隐藏 显示

html 隐藏和显示

在 HTML 代码中，有时需要对某些元素进行隐藏和显示的操作。在本文中，我们将讨论 HTML 中隐藏和显示元素的几种方法。

1. 使用 display 属性

display 属性用于指定一个元素的显示方式，有以下几个可选值：

• none：元素不显示，不占用空间。
• block：元素以块级显示，前后都有换行符。
• inline：元素以行内显示，前后无换行符。
• inline-block：元素以行内块级显示，前后无换行符，但可以设置宽高等属性。

通过设置 display 属性，可以实现元素的隐藏和显示：

<div id="myDiv" style="display: none;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.display='block'">显示</button>
<button onclick="document.getElementById('myDiv').style.display='none'">隐藏</button>

上述代码中，我们先通过 style 属性将 div 元素的 display 属性设置为 none，即隐藏该元素。然后通过两个 button 元素的 onclick 事件和 JavaScript 来实现按钮的点击操作，进而改变元素的显示状态。

立即学习“前端免费学习笔记（深入）”；

2. 使用 visibility 属性

visibility 属性用于指定元素的可见性，有以下几个可选值：

• visible：元素可见。
• hidden：元素不可见，但仍占用空间。

通过设置 visibility 属性，可以实现元素的隐藏和显示：

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

<div id="myDiv" style="visibility: hidden;">这是一个被隐藏的 div。</div>
<button onclick="document.getElementById('myDiv').style.visibility='visible'">显示</button>
<button onclick="document.getElementById('myDiv').style.visibility='hidden'">隐藏</button>

上述代码中，我们先通过 style 属性将 div 元素的 visibility 属性设置为 hidden，即隐藏该元素。然后通过两个 button 元素的 onclick 事件和 JavaScript 来实现按钮的点击操作，进而改变元素的显示状态。

3. 使用 opacity 属性

opacity 属性用于指定元素的透明度，取值范围为 0~1，0 表示完全透明，1 表示不透明。通过设置 opacity 属性，可以实现元素的渐隐和渐显效果：

<div id="myDiv" style="opacity: 0;">这是一个被隐藏的 div。</div>
<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>

<script>
  function show() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 1;
    div.style.transition = "opacity 1s";
  }
  
  function hide() {
    var div = document.getElementById("myDiv");
    div.style.opacity = 0;
    div.style.transition = "opacity 1s";
  }
</script>

上述代码中，我们通过设置 div 元素的 opacity 属性和 transition 属性，实现了 div 元素的渐隐和渐显效果。当按钮被点击时，通过 JavaScript 将 div 元素的 opacity 属性设置为相应的值（0 或 1），然后将 transition 属性设置为相应的时间，来实现渐隐和渐显的效果。

总结

以上三种方法都可以实现 HTML 元素的隐藏和显示效果，但在不同情况下，可能会有不同的使用效果。需要根据具体的需求和场景选择适合的方法来实现。

以上就是html 隐藏 显示的详细内容，更多请关注php中文网其它相关文章！