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

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

使用 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

BFC与IFC

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

元素focus页面不滚动不定位的JS处理

有时候我们希望元素被focus的时候页面不发生滚动,例如我们点击一个按钮打开一个弹框,此时点击弹框中的关闭按钮隐藏弹框后,希望键盘的焦点回到之前的按钮上,我们就会执行如下JavaScript代码:

js动态生成html元素并为元素追加属性

动态生成HTML元素的方法有三种:document.createElement()创建元素,再用appendChild( )添加、使用innerHTML直接将元素添加到指定节点、jQuery创建节点...

原生JS如何获取当前元素属于父元素第几个子元素

我们经常通过document.getElementById 方法来获取到一个元素,这个时候我们经常需要有一个需求,那就是如何判断这个元素在父元素中的位置。原生JS有一个常见的小技巧那就是通过元素的previousSibling 属性,额外需要注意的是该属性会遍历text节点,即回车键。

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

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

html块级元素和行级元素的区别和认识

块级元素会独占一行,其宽度自动填满其父元素宽度行内元素不会独占一行;块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果

HTML/CSS中空元素有哪些?

在用来描述网页的计算机语言中,有一种超文本标记语言,被称为HTML(Hyper Text Markup Language) 。而构成HTML内容的标记语言是由一套标记标签组成。这套标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词,比如 <html>

h5中的结构元素header、nav、article、aside、section、footer介绍

结构元素不具有任何样式,只是使页面元素的的语义更加明确。header元素是一种具有引导和导航作用的的结构元素,该元素可以包含所有通常放在页面头部的内容。nav元素用于定义导航链接,是html5新增的元素

HTML中的块级元素有哪些?

在css基础当中,我们往往会遇到块元素和行内元素,块元素和行内元素也是很重要的基础知识。那么块级元素是什么?HTML中的块级元素有哪些?

精确获取页面元素的位置

现在网上最流行方法是John Resig在《Pro JavaScript techniques》提出的offset大法,累加元素offsetParent的offsetLeft和offsetTop一直到DOM的顶层。

点击更多...

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