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

更新日期: 2018-07-16阅读量: 1679标签: 元素

使用 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

padding-top的百分比值参考对象竟是父级元素的宽度

书写页面样式与布局是前端工程师Coding 中必不可少的一项工作,在定义页面元素的样式时,padding 属性也是经常被使用到的。padding 属性用于设置元素的内边距

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

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

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

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

使用document.querySelector获取元素

使用 document.querySelector() 和 document.querySelectorAll(), 将 CSS选择器 作为参数传入即可;注意: querySelecotor()返回某个元素节点, querySelectorAll()返回一个NodeList实例对象;

去除inline-block元素间的间距

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

HTML中通过CSS方式隐藏元素方法汇总

这两种方式的区别是: display 设置为 none之后, 该元素不占用文档流,visibility 设置为 hidden之后, 该元素仍然占用文档流, 只不过是看不见了而已

Js在Array数组中按指定位置删除或添加元素对象

JavaScript的数据中可通过splice/slice在指定位置添加或删除元素。另外还有slice、delete等方法实现。splice方法向/从数组中添加/删除项目,然后返回被删除的项目

js元素创建的三种方式

元素创建的三种方式:1. document.write(标签的代码及内容)2. 对象.innerHTML=标签及代码;3. document.createElement(标签的名字);

如何实现元素曝光上报?

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

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

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

点击更多...

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