CSS visibility 属性具体有哪些值？如何控制元素显示状态？

本文共计723个文字，预计阅读时间需要3分钟。

visibility 属性只有四个合法取值：

visibility: hidden 与 display: none 的关键区别

两者都让元素“不可见”，但行为完全不同：

• visibility: hidden 保留元素在文档流中的位置和尺寸，只是不渲染内容（包括子元素），仍响应 pointer-events（除非显式设为 none）
• display: none 彻底从渲染树中移除，不占空间、不触发重排（reflow），子元素也一并消失且无法被 JS 访问到（如 getBoundingClientRect() 返回全 0）
• 动画中，visibility 支持过渡（transition: visibility 0.3s），但仅能做“硬切”——没有中间态，常配合 opacity 实现淡出效果

visibility: collapse 在表格中的特殊行为

这是唯一一个在不同上下文有语义差异的取值，只对表格相关元素（<tr>、<td>、<col> 等）有意义：

• 在 <tr> 上设为 collapse：整行隐藏，且后续行会上移填补空位（类似 display: none 的布局效果）
• 在 <td> 或 <col> 上设为 collapse：列宽会重新分配，相邻列自动拉伸，而非留出空白
• 在非表格元素（如 <div>）上使用 collapse，浏览器按 hidden 处理，但不会报错或警告

JS 中读写 visibility 的注意事项

通过 JS 操作时需注意计算样式与内联样式的差异：

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

• element.style.visibility 只读取内联样式，无法获取 CSS 规则或继承值
• 要获取真实生效值，必须用 getComputedStyle(element).visibility
• 设置为 ''（空字符串）不会回退到父级值，而是清空内联声明，可能触发继承 —— 但若父级也没设，则默认是 visible
• 慎用 visibility 控制可访问性：屏幕阅读器仍会读取 visibility: hidden 元素的内容，如需完全隐藏语义，应加 aria-hidden="true" 或改用 display: none

/* 示例：表格行折叠后列宽自动重分配 */ table { border-collapse: collapse; } tr.collapse-me { visibility: collapse; } td { border: 1px solid #ccc; padding: 4px; }

collapse 的行为在 Flex/Grid 布局中无效，也不触发重排优化；真正需要“占位但不可见”时，visibility: hidden 是最稳妥的选择，但务必确认它是否符合你的交互与无障碍需求。