用 CSS 隐藏页面元素有许多种方法. 你可以将 opacity 设为 0, 将 visibility 设为 hidden, 将 display 设为 none 等方式隐藏元素.
CSS 使用 display 属性隐藏元素不会占位置.
display 属性依照词义真正隐藏元素. 将 display 属性设为 none 确保元素不可见并且连盒模型也不生成. 使用这个属性, 被隐藏的元素不占据任何空间.
不仅如此, 一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效. 此外, 读屏软件也不会读到元素的内容. 这种方式产生的效果就像元素完全不存在.
任何这个元素的子孙元素也会被同时隐藏. 为这个属性添加过渡动画是无效的, 它的任何不同状态值之间的切换总是会立即生效.
不过请注意, 通过 DOM 依然可以访问到这个元素. 因此你可以通过 DOM 来操作它, 就像操作其他的元素.
- .hide {
- display: none;
- }
示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- HTML 中文网
- </title>
- <style>
- h1.hidden {display:none;}
- </style>
- </head>
- <body>
- <h1>
- 这是一个可见标题
- </h1>
- <h1 class="hidden">
- 这是一个隐藏标题
- </h1>
- <p>
- 注意, 实例中的隐藏标题不占用空间.
- </p>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/12357.html