在 css 中隐藏元素的六种方法
用css隐藏页面元素有许多种方法:
-
display:none (通过隐藏盒子属性,脱标)
-
visibility:hidden (通过隐藏盒子属性,不脱标)
-
opacity:0 (通过改变元素的透明度,不脱标)
-
position:absolute (通过定位将元素定到远离页面的位置,脱标)
- cli-path:polygon(0px 0px , 0px 0px,0px 0px,0px 0px) (通过裁剪盒子,不脱标)
- position:absolute;与clip:rect(0px 0px 0px 0px)配合 (通过裁剪绝对定位的盒子,脱标)
visibility、display、opacity三者区别:
-
隐藏后是否占据原有空间
display:none ,不占据空间,页面重新渲染
visibility:hidden,占据空间,不能触发点击事件
opacity:0 ,占据空间,仍可触发点击事件 -
性能
display:none 引起页面回流与重绘,性能消耗大
visibility:hidden 只造成本元素的重绘,性能消耗较少
opacity:0 只造成本元素重绘,性能消耗较少这一点的区别是由于是否隐藏后是否占据原有空间的区别而引起的
-
继承
display:none和opacity:0 非继承属性,修改子孙节点属也无法显示visibility:hidden 是继承属性,子孙节点由于继承了visibility:hidden才不显示,通过设置子节点visibility:visible就可以让子孙节点显示出来。
-
css3动画transition支持性
transition不支持display属性
transition动画支持opacity或者visibility属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隐藏元素的方式</title>
<style>
.box{
width: 300px;
height: 200px;
background-color: pink;
line-height: 200px;
}
.hidd{
position: absolute;
top:-10000px;
left: -10000px;
}
.clip{
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
.poclip{
position: absolute;
clip:rect(0px,0px,0px,0px);
}
</style>
</head>
<body>
<button onclick="change1()">display隐藏</button>
<button onclick="change2()">visibility隐藏</button>
<button onclick="change3()">opacity隐藏</button>
<button onclick="change4()">position隐藏</button>
<button onclick="change5()">cli-path隐藏</button>
<button onclick="change6()">clip隐藏</button>
<div class="box ">
<span>https://blog.****.net/muzidigbig/</span>
</div>
<p>我对你开过的玩里面,藏着我想对你说不出的秘密。</p>
</body>
<script >
function change1() {
var box = document.getElementsByClassName('box')[0];
//隐藏之后不占据原来的位置(脱标)
box.style.display = 'none';
}
function change2() {
var box = document.getElementsByClassName('box')[0];
//隐藏之后还占据原来的位置(不脱标)
box.style.visibility = 'hidden';
}
function change3() {
var box = document.getElementsByClassName('box')[0];
//通过改变透明度来隐藏(不脱标)
box.style.opacity = '0';
}
function change4() {
var box = document.getElementsByClassName('box')[0];
//定位(脱标)
box.className += 'hidd'
}
function change5() {
var box = document.getElementsByClassName('box')[0];
//通过裁剪元素(不脱标)
box.className += 'clip'
}
function change6() {
var box = document.getElementsByClassName('box')[0];
//通过裁剪与定位(脱标)
box.className += 'poclip'
}
</script>
</html>
知识补充:
定义和用法
clip 属性剪裁绝对定位元素。
说明
这个属性用于定义一个剪裁矩形。对于一个绝对定义元素,在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据 overflow 的值来处理。剪裁区域可能比元素的内容区大,也可能比内容区小。
若有不足请多多指教!希望给您带来帮助!
上一篇: 实现 CSS 隐藏滚动条并可滚动内容的 3 种方法
下一篇: jquery 隐藏 div 内的输入
推荐阅读
-
Java 8新特性探究(十三)JavaFX 8新特性以及开发2048游戏-JavaFX历史## 跟java在服务器端和web端成绩相比,桌面一直是java的软肋,于是Sun公司在2008年推出JavaFX,弥补桌面软件的缺陷,请看下图JavaFX一路走过来的改进 从上图看出,一开始推出时候,开发者需使用一种名为JavaFX Script的静态的、声明式的编程语言来开发JavaFX应用程序。因为JavaFX Script将会被编译为Java bytecode,程序员可以使用Java代码代替。 JavaFX 2.0之后的版本摒弃了JavaFX Script语言,而作为一个Java API来使用。因此使用JavaFX平台实现的应用程序将直接通过标准Java代码来实现。 JavaFX 2.0 包含非常丰富的 UI 控件、图形和多媒体特性用于简化可视化应用的开发,WebView可直接在应用中嵌入网页;另外 2.0 版本允许使用 FXML 进行 UI 定义,这是一个脚本化基于 XML 的标识语言。 从JDK 7u6开始,JavaFx就与JDK捆绑在一起了,JavaFX团队称,下一个版本将是8.0,目前所有的工作都已经围绕8.0库进行。这是因为JavaFX将捆绑在Java 8中,因此该团队决定跳过几个版本号,迎头赶上Java 8。 ##JavaFx8的新特性 ## ###全新现代主题:Modena 新的Modena主题来替换原来的Caspian主题。不过在Application的start方法中,可以通过setUserAgentStylesheet(STYLESHEET_CASPIAN)来继续使用Caspian主题。 参考http://fxexperience.com/2013/03/modena-theme-update/ ###JavaFX 3D 在JavaFX8中提供了3D图像处理API,包括Shape3D (Box, Cylinder, MeshView, Sphere子类),SubScene, Material, PickResult, LightBase (AmbientLight 和PointLight子类),SceneAntialiasing等。Camera类也得到了更新。从JavaDoc中可以找到更多信息。 ###富文本 强化了富文本的支持 ###TreeTableView ###日期控件DatePicker 增加日期控件 ###用于 CSS 结构的公共 API
-
在HTML中实现div元素垂直居中的三种方法
-
Java实现div元素在页面中的垂直居中方法详解
-
使用插件的方法在IntelliJ IDEA中解锁隐藏功能
-
简易讲解:在JavaScript中添加数组元素的三种方法
-
在Java中向数组添加新元素的方法指南
-
在Java中如何给数组添加元素的方法
-
在 Java 中向数组添加新元素的方法
-
在JavaScript中:添加、移除和去除重复元素于数组的操作方法
-
在React中向数组添加新元素的简单方法