CSS隐藏元素的方法
CSS隐藏元素的方法
使用CSS
隐藏元素的主要方式有diaplay: none;
、opacity: 0;
、visibility: hidden;
、position: absolute; overflow: hidden;
、clip-path: polygon(0 0, 0 0, 0 0, 0 0);
、height: 0; overflow: hidden;
。
diaplay
display: none;
属性依照词义是真正隐藏元素,使用这个属性,被隐藏的元素不占据任何空间,用户交互操作例如点击事件都不会生效,读屏软件也不会读到元素的内容,这个元素的任何子元素也会同时被隐藏。当使用该属性将元素从显示状态切换为隐藏状态时,元素不占据原本的空间,会触发浏览器的重绘与回流。为这个属性添加过渡动画是无效的,他的任何不同状态值之间的切换总是会立即生效。这种方式产生的效果就像元素完全不存在,但在DOM
中依然可以访问到这个元素,也可以通过DOM
来操作它。
<style type="text/css">
.display-hide{
display: none;
}
</style>
<section>
<div id="t1"></div>
</section>
<script type="text/javascript">
document.getElementById("t1").addEventListener("click", e => {
alert("第一次点击会隐藏,此后再也无法点击");
e.srcElement.classList.add("display-hide");
})
</script>
opacity
opacity
是用以设置透明度的属性,将opacity
设置为0
只能从视觉上隐藏元素,而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互例如点击事件,对于其添加过渡属性可以显示动画效果。对于opacity
属性,可以利用其透明的视觉效果制作点击劫持攻击。
<style type="text/css">
.opacity-hide{
opacity: 0;
}
</style>
<section>
<div id="t2">opacity</div>
</section>
<script type="text/javascript">
document.getElementById("t2").addEventListener("click", e => {
alert("第一次点击会透明,依旧占据原本位置,点击事件依旧有效,动画过渡效果生效");
e.srcElement.classList.add("opacity-hide");
})
</script>
visibility
当visibility
属性值为hidden
的时候,元素将会隐藏,也会占据着自己的位置,并对网页的布局起作用,与opacity
不同的是它不会响应任何用户交互,元素在读屏软件中也会被隐藏,如果对于子元素的visibility
被设置为visible
而父元素的visibility
设置为hidden
,子元素依旧可以显示而父元素会被隐藏。
<style type="text/css">
.visibility-hide{
visibility: hidden;
}
</style>
<section>
<div id="t3">
<div>visibility</div>
<div style="visibility: visible; color: #000;">still show</div>
</div>
</section>
<script type="text/javascript">
document.getElementById("t3").addEventListener("click", e => {
alert("第一次点击会隐藏,依旧占据原本位置,点击事件不再生效");
e.srcElement.classList.add("visibility-hide");
})
</script>
position
使用position
与overflow
属性的意义就是把元素脱离文档流移出视觉区域,超出屏幕显示的部分隐藏掉,使用这两个属性隐藏主要就是通过控制方向top
、left
、right
、bottom
达到一定的值,离开当前显示区域并将超出部分裁剪,此外在未隐藏时设定好相关样式,在动态添加class
时即可实现过渡动画。
<style type="text/css">
body{
overflow: hidden;
}
.posistion-origin{
position: absolute;
left: 5px;
top: 5px;
}
.position-hide{
left: -150px;
}
</style>
<section style="position: relative;height: 115px;">
<div id="t4" class="posistion-origin" >position</div>
</section>
<script type="text/javascript">
document.getElementById("t4").addEventListener("click", e => {
alert("第一次点击会隐藏,元素不占据原本位置,过渡动画有效");
e.srcElement.classList.add("position-hide");
})
</script>
clip-path
clip-path
属性使用裁剪方式创建元素的可显示区域,区域内的部分显示,区域外的隐藏,直接将元素裁剪之后即可实现隐藏效果,该属性兼容性一般,具体可以查阅https://caniuse.com/#search=clip-path
。
<style type="text/css">
.clip-path-hide{
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
</style>
<section>
<div id="t5" >clip-path</div>
</section>
<script type="text/javascript">
document.getElementById("t5").addEventListener("click", e => {
alert("第一次点击会隐藏,元素占据原本位置,点击事件不再生效");
e.srcElement.classList.add("clip-path-hide");
})
</script>
height
类似于position
与overflow
的组合,使用height: 0;
将元素高度设置为0
,使用overflow: hidden
将超出部分裁剪隐藏,即可实现隐藏效果,如果需要使用这两个属性制呈现过渡动画的话,需要将height
给予一个确定的值,不能是auto
。
<style type="text/css">
.height-hide{
height: 0 !important;
overflow: hidden;
}
</style>
<section>
<div id="t6" >height</div>
</section>
<script type="text/javascript">
document.getElementById("t6").addEventListener("click", e => {
alert("第一次点击会隐藏,元素不占据原本位置,点击事件不再生效,过渡动画有效");
e.srcElement.classList.add("height-hide");
})
</script>
代码示例
<!DOCTYPE html>
<html>
<head>
<title>隐藏元素</title>
<style type="text/css">
body{
overflow: hidden;
}
section > div:first-child{
width: 100px;
height: 100px;
background-color: blue;
}
section{
border-bottom: 1px solid #eee;
padding: 5px;
box-sizing: border-box;
}
div{
color: #fff;
transition: all .3s;
}
.display-hide{
display: none;
}
.opacity-hide{
opacity: 0;
}
.visibility-hide{
visibility: hidden;
}
.posistion-origin{
position: absolute;
left: 5px;
top: 5px;
}
.position-hide{
left: -150px;
}
.clip-path-hide{
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
.height-hide{
height: 0 !important;
overflow: hidden;
}
</style>
</head>
<body>
<section>
<div id="t1">display</div>
</section>
<section>
<div id="t2">opacity</div>
</section>
<section>
<div id="t3">
<div>visibility</div>
<div style="visibility: visible; color: #000;">still show</div>
</div>
</section>
<section style="position: relative;height: 115px;">
<div id="t4" class="posistion-origin" >position</div>
</section>
<section>
<div id="t5" >clip-path</div>
</section>
<section>
<div id="t6" >height</div>
</section>
</body>
<script type="text/javascript">
document.getElementById("t1").addEventListener("click", e => {
alert("第一次点击会隐藏,此后再也无法点击");
e.srcElement.classList.add("display-hide");
})
document.getElementById("t2").addEventListener("click", e => {
alert("第一次点击会透明,依旧占据原本位置,点击事件依旧有效,动画过渡效果生效");
e.srcElement.classList.add("opacity-hide");
})
document.getElementById("t3").addEventListener("click", e => {
alert("第一次点击会隐藏,依旧占据原本位置,点击事件不再生效");
e.srcElement.classList.add("visibility-hide");
})
document.getElementById("t4").addEventListener("click", e => {
alert("第一次点击会隐藏,元素不占据原本位置,过渡动画有效");
e.srcElement.classList.add("position-hide");
})
document.getElementById("t5").addEventListener("click", e => {
alert("第一次点击会隐藏,元素占据原本位置,点击事件不再生效");
e.srcElement.classList.add("clip-path-hide");
})
document.getElementById("t6").addEventListener("click", e => {
alert("第一次点击会隐藏,元素不占据原本位置,点击事件不再生效,过渡动画有效");
e.srcElement.classList.add("height-hide");
})
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.cnblogs.com/jing-tian/p/10969109.html
https://blog.csdn.net/cuo9958/article/details/53559826
https://blog.csdn.net/weixin_41910848/article/details/81875725
- 【LeetCode】关关刷题日记24-Leetcode 121. Best Time to Buy and Sell Stock
- 线性表的链式存储结构的实现及其应用(C/C++实现)
- [接口测试 - 基础篇] 01 你应该了解的协议基础
- 使用TensorFlow实现神经网络的介绍
- HTTP协议报文结构及抓包报文分析示例
- 必备 .NET - C# 异常处理
- Java Socket获取本机的InetAddress实例
- 机器理解大数据秘密:聚类算法深度剖析
- BZOJ 3668: [Noi2014]起床困难综合症【贪心】
- 用C#实现字符串相似度算法(编辑距离算法 Levenshtein Distance)
- 51 Nod 1007 正整数分组【类01背包】
- 从入门到精通之Boyer-Moore字符串搜索算法详解
- 线性表的顺序存储结构的实现及其应用(C/C++实现)
- IPython使用学习笔记
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android 实现无网络页面切换的示例代码
- RecyclerVIew实现悬浮吸顶效果
- 小程序地图学习之获取位置 获取经纬度 获取地名 获取地址
- 详解okhttp3 请求头不能为中文的坑
- Android为TextView添加字体库和设置描边的方法
- Android 解决WebView调用loadData()方法显示乱码的问题
- Android 自定义TextView去除paddingTop和paddingBottom
- Android MeasureSpec的理解和源码的解析
- Android 中自定义ContentProvider与ContentObserver的使用简单实例
- Android沉浸式状态栏的实现代码
- MyBatis源码解析之基础模块—DataSource
- Android中Activity和Fragment传递数据的两种方式
- Android MTU 值修改的实例详解
- Android ListView填充数据的方法
- AFURLSessionManager 上传下载使用代码说明