隐藏元素
在DOM中完全隐藏一个元素(在视觉上和位置上),同时仍然允许访问该元素。
- 移除所有边框和内边距,并隐藏元素的溢出部分。
- 使用
clip
定义元素不显示任何部分。 - 将元素的
height
和width
设置为1px
,并使用margin: -1px
将其取消。 - 使用
position: absolute
使元素在DOM中不占用空间。
[!TIP]
这种技术提供了一种可访问且布局友好的替代方案,用于替代
display: none
(无法被屏幕阅读器读取)和visibility: hidden
(在DOM中占用物理空间)。
<a class="button" href="https://google.com">
了解更多 <span class="offscreen">关于裤子</span>
</a>
.offscreen {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}