前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >不同场景下使用CSS隐藏元素

不同场景下使用CSS隐藏元素

作者头像
laixiangran
发布2018-07-25 14:27:13
1.4K0
发布2018-07-25 14:27:13
举报
文章被收录于专栏:前端布道

使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别。

元素不可见,同时不占据空间、辅助设备无法访问、不渲染

使用 script 标签隐。例如:

代码语言:javascript
复制
<script type="text/html">
    <img src="1.jpg">
</script>

此时,图片 1.jpg 是不会有请求的。<script> 标签是不支持嵌套的,因此,如果希望在 <script> 标签中再放置其他不渲染的模板内容,可以试试使用 <textarea> 元素。例如:

代码语言:javascript
复制
<script type="text/html">
    <img src="1.jpg">
    <textarea style="display: none;">
        <img src="2.jpg">
    </textarea>
</script>

同样 2.jpg 也是不会有请求的。 另外,<script> 标签隐藏内容获取使用 script.innerHTML<textarea> 使用 textarea.value

元素不可见,同时不占据空间、辅助设备无法访问,但资源有加载,DOM 可访问

使用 display: none 隐藏。例如:

代码语言:javascript
复制
.dn {
    display: none;
}
元素不可见,同时不占据空间、辅助设备无法访问,但显隐的时候可以有 transition 淡入淡出效果

使用 position: absolutevisibility: hidden; 隐藏。例如:

代码语言:javascript
复制
.hidden {
    position: absolute;
    visibility: hidden;
}
元素不可见,不能点击、辅助设备无法访问,但占据空间保留

使用 visibility: hidden; 隐藏。例如:

代码语言:javascript
复制
.hn {
    visibility: hidden;
}
元素不可见,不能点击、不占据空间,但键盘可访问

使用 clip 裁剪 或者 relative 隐藏。例如:

代码语言:javascript
复制
.clip {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

.out {
    position: relative;
    left: -999em;
}
元素不可见,不能点击、但占据空间、键盘可访问

使用 relativez-index 隐藏。例如,如果条件允许,也就是和层叠上下文之间存在设置了背景色的父元素,则也可以使用更友好的 z-index 负值隐藏。例如:

代码语言:javascript
复制
.lower {
    position: relative;
    z-index: -1;
}
元素不可见,可以点击、不占据空间

使用透明度隐藏。例如:

代码语言:javascript
复制
.lower {
    position: relative;
    opacity: 0;
    filter: Alpha(opacity=0);
}
元素不可见,可以点击、可以选择、占据空间

使用透明度隐藏。例如:

代码语言:javascript
复制
.lower {
    opacity: 0;
    filter: Alpha(opacity=0);
}

大家可以通过实际的隐藏场景选择合适的隐藏方法。

实际开发场景千变万化,可能还有更多的隐藏方法,也欢迎大家积极留言探讨。

摘自:《CSS世界》第10章 元素的显示与隐藏

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-05-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端布道 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 元素不可见,同时不占据空间、辅助设备无法访问、不渲染
  • 元素不可见,同时不占据空间、辅助设备无法访问,但资源有加载,DOM 可访问
  • 元素不可见,同时不占据空间、辅助设备无法访问,但显隐的时候可以有 transition 淡入淡出效果
  • 元素不可见,不能点击、辅助设备无法访问,但占据空间保留
  • 元素不可见,不能点击、不占据空间,但键盘可访问
  • 元素不可见,不能点击、但占据空间、键盘可访问
  • 元素不可见,可以点击、不占据空间
  • 元素不可见,可以点击、可以选择、占据空间
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档