隐藏 DOM 元素测试 实验交互示例：隐藏 DOM 元素测试。 博客配套 实验 ← Demo 归档

隐藏 DOM 元素测试

实验交互示例：隐藏 DOM 元素测试。

更新于 2020-12-03

Web 实验 博客配套 legacy 实验 博客配套

新窗口打开 原路径 /static/html/hidden-dom.html

简介

隐藏 DOM 元素的多种方式对比（display / visibility / opacity / 移出视口等）及其对布局、事件、可访问性的影响。

如何测试验证

1. 切换不同隐藏方式，观察是否仍占位。
2. 尝试点击被隐藏元素，确认是否还能收到事件。
3. 用屏幕阅读器或 Accessibility 面板检查可见性。
4. 测量 display:none 与 visibility:hidden 的重排差异。

相关规范与文档

• MDN: display
• MDN: visibility
• MDN: aria-hidden