CSS隐藏页面元素常用方法_不同场景下使用CSS隐藏元素

时间: 2018-07-16阅读: 1452标签: 元素

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


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

使用 script 标签隐。例如:

<script type="text/html">
    <img src="1.jpg">
</script>

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

<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 隐藏。例如:

.dn {
    display: none;
}


元素不可见,同时不占据空间、辅助设备无法访问,但显隐的时候可以有 transition 淡入淡出效果

使用 position: absolute 和 visibility: hidden; 隐藏。例如:

.hidden {
    position: absolute;
    visibility: hidden;
}


元素不可见,不能点击、辅助设备无法访问,但占据空间保留

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

.hn {
    visibility: hidden;
}


元素不可见,不能点击、不占据空间,但键盘可访问

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

.clip {
    position: absolute;
    clip: rect(0, 0, 0, 0)
}

.out {
    position: relative;
    left: -999em;
}


元素不可见,不能点击、但占据空间、键盘可访问

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

.lower {
    position: relative;
    z-index: -1;
}


元素不可见,可以点击、不占据空间

使用透明度隐藏。例如:

.lower {
    position: relative;
    opacity: 0;
    filter: Alpha(opacity=0);
}


元素不可见,可以点击、可以选择、占据空间

使用透明度隐藏。例如:

.lower {
    opacity: 0;
    filter: Alpha(opacity=0);
}


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

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/929

如何用 CSS 强调标记文本元素?

当我们在 Web 上做文本编辑器时,最常见的一个场景便是和文字样式打交道了。比如像语文课本那样需要在每篇文章要学习的生字上标上一个小黑点,这个时候就该用到 CSS 中 text-emphasis-style 这个属性。

css按状态选择链接元素

CSS允许根据链接的当前状态对它们进行格式化。链接的状态包括访问者是否将鼠标停留在链接上,链接是否被访问过 ,等等。可以通过一系列伪类实现这一特性。

BFC与IFC

块级元素是那些视觉上会被格式化成块状的元素,通俗一点来说就是那些会换新行的元素。例例如:display属性为block, list-item, table, flex, grid。块元素是 display 属性值为 block 的元素

去除inline-block元素间的间距

真正意义上的inline-block水平呈现的元素间,换行显示或者空格隔开的情况下会有间距,这是因为浏览器在解析时,会将换行等读取成一个空格导致。

jQuery获取元素的大小和位置信息

css()方法获取元素的宽高:css()方法返回的其实是getComputedStyle(node).width的值,也就是元素内容区的宽高;width() / height()这两个方法返回的也是元素内容区的宽高,但是不带单位

JS获取display为none的隐藏元素的宽度和高度的解决方案

有时候,我们一进入页面,就需要获取display为none元素的物理尺寸(宽高),或获取display为none元素的子元素的物理尺寸(宽高),本篇文章就如何解决以上问题给出自己的解决方案,获取display为none元素的子元素的物理尺寸

如何利用JS检查元素是否在视口内

Intersection Observer API提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。在目标元素与视口或者其他指定元素发生交集时和触发配置的回调函数。

html元素间的边距重叠问题与BFC

BFC即块级格式化上下文,创建了 BFC 的元素是一个独立的容器,里面无论如何布局都不会影响到外面的元素;设置 overflow 属性,除了 visible 以外的值(例如 hidden、auto)

jQuery绑定动态元素的点击事件无效

之前就一直受这个问题的困扰,在写ajax加载数据的时候发现,后面追加进来的demo节点元素,失去了之前的点击事件。为什么点击事件失效,我们该怎么去解决呢?那么,我们通过下面的示例简单说明。

如何实现元素曝光上报?

进行数据上报的时候,经常会遇到列表数据曝光上报的问题,只对在当前可视范围内的数据内容进行曝光上报,而对于未在可视范围内的数据不进行曝光上报,等待用户滚动页面或者区域使元素出现在可视范围内时才进行曝光上报

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!