元素显示隐藏的9种思路

时间: 2019-12-11阅读: 455标签: 元素

在网页制作中,元素的显示隐藏是非常常见的需求。本文将介绍元素显示隐藏的9种思路

 

display

对于元素显隐来说,最常见就是display:none | display:block,但是使用这种方法有个问题,元素的display属性在隐藏前并不都是block,还有可能是inline、inline-block等

注意:如果要适用于任何元素需要提前储存元素的display值

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试文字</div>
<script>
show.onclick = function(){
    test.style.display = 'block';
}    
hide.onclick = function(){
    test.style.display = 'none';
}
</script>    

 

visibility

visibility:hidden与display:none作为隐藏元素的两种方式,常常被人们拿来比较。其实区别很简单,前者不脱离文档流,保留隐藏之前元素占据的物理区域;而后者则脱离文档流,如果重新显示则需要页面的重新绘制。还有一点区别却很少人提到,如果父级设置display:none;子级设置display:block也不会显示;而如果父级设置visibility:hidden;子级设置visibility:visible时子级会显示出来

注意:visilibity可应用transition属性。因为visibility是离散步骤,在0到1数字范围之内,0表示隐藏,1表示显示。visibility:hidden可以看成visibility:0;visibility:visible可以看成visibility:1。于是,visibility应用transition等同于0~1之间的过渡效果。实际上,只要visibility的值大于0就是显示的。由于这个现象,我们可以利用transition实现元素的延时显示隐藏

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试文字</div>
<script>
show.onclick = function(){
    test.style.transition = 'none';
    test.style.visibility = 'visible';
}    
hide.onclick = function(){
    test.style.transition = 'visibility 0.2s 0.5s';
    test.style.visibility = 'hidden';
}
</script>


hidden

可能有些人不太熟悉,html有个hidden全局属性,专门用于显示隐藏元素,与display:none的作用类似,元素隐藏时脱离文档流,无法接受JavaScript事件

注意:IE10-不支持test.hidden='hidden'写法,只支持test.setAttribute('hidden','hidden')写法

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试文字</div>
<script>
show.onclick = function(){
    test.removeAttribute('hidden');
    /*test.hidden = '';*/
}    
hide.onclick = function(){
    test.setAttribute('hidden','hidden');
    /*test.hidden = 'hidden';*/
}
</script>    

 

opacity

对于元素显隐,opacity的使用频率也挺多。opacity的好处是,即使opacity为0的元素,仍然可以接受JavaScript事件,这是display:none和visiblity:hidden所不具备的。

<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="reset">还原</button>
<div id="test">测试文字</div>
<script>
show.onclick = function(){
    test.style.transition = 'none';
    test.style.opacity = '1';
}    
hide.onclick = function(){
    test.style.transition = 'opacity 0.2s';
    test.style.opacity = '0';
}
test.onclick = function(){
    this.style.width = '200px';
}
reset.onclick = function(){
    history.go();
}
</script>    

 

overflow

css中有一个属性是overflow,overflow:hidden代表着溢出隐藏。我们可以利用父级的overflow:hidden配合父级的height:0或width:0来实现元素的显隐

注意:当设置overflow的元素在绝对定位元素和其包含块之间的时候,overflow属性会失效

<style>
#testWrap{
    height: 70px;
    transition: height 1s;
    overflow: hidden;
}
</style>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="testWrap">
    <div id="test">测试内容</div>        
</div>
<script>
show.onclick = function(){
    testWrap.style.height = '70px';
}    
hide.onclick = function(){
    testWrap.style.height = '0';
}
</script>    

 

clip

css裁剪clip这个属性平时用的不多,当clip:rect(top,right,bottom,left)中的top>=bottom,或者left>=right时,可实现元素的隐藏效果,效果类似于visibility:hidden

注意:clip属性只能应用在绝对定位元素上

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>    
<script>
show.onclick = function(){
    test.style.position ='static';
    test.style.clip = 'auto';
}    
hide.onclick = function(){
    test.style.position ='absolute';
    test.style.clip = 'rect(0 0 0 0)';
}
</script>    

 

transform

css变形transform是一些效果的集合,主要是移动、旋转、缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果。通过不同的变形函数可以实现元素显隐效果

注意:IE9-浏览器不支持,safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前缀

【1】scale

transform:scale(0)时,元素被隐藏

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>    
<script>
show.onclick = function(){
    test.style.transform ='scale(1)';
}    
hide.onclick = function(){
    test.style.transform ='scale(0)';
}
</script>    

【2】rotate

transform:rotateX(90deg)时,元素被隐藏

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>
<script>
show.onclick = function(){
    test.style.transform ='rotateX(0)';
}    
hide.onclick = function(){
    test.style.transform ='rotateX(90deg)';
}
</script>

【3】skew

transform:skew(90deg)时,元素被隐藏

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>
<script>
show.onclick = function(){
    test.style.transform ='skew(0)';
}    
hide.onclick = function(){
    test.style.transform ='skew(90deg)';
}
</script>

 

覆盖

利用定位元素可以覆盖普通流元素的特性。为元素的before伪元素设置相同的尺寸,通过控制伪元素的定位属性,实现显隐效果

<style>
#test:hover:before{
    content: "";
    position: absolute;
    width: 100px;
    height: 60px;
    background-color: white;
}    
</style>
<div>测试内容</div>

//鼠标移入移出会出现元素的显隐效果

 

偏移

元素显示隐藏的另一种常见思路是偏移,将元素移动到视窗范围外,也可以实现等价的显隐效果

【1】margin-top

利用负margin将元素移出视窗外,要注意的是设置负margin的元素并没有脱离普通流,后续元素会跟着一起移动

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>
<script>
show.onclick = function(){
    test.style.marginTop ='10px';
}    
hide.onclick = function(){
    test.style.marginTop ='-9999px';
}
</script>

【2】left

通过设置相对定位或绝对定位元素的偏移属性,将元素移动到视窗外

<style>
#test{
    position: relative;
/*  position: absolute; */
}    
</style>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>    
<script>
show.onclick = function(){
    test.style.left ='0';
}    
hide.onclick = function(){
    test.style.left ='-9999px';
}
</script>    

【3】translate

<button id="show">显示</button>
<button id="hide">隐藏</button>
<div id="test">测试内容</div>    
<script>
show.onclick = function(){
    test.style.transform ='translate(0,0)';
}    
hide.onclick = function(){
    test.style.transform ='translate(-9999px,-9999px)';
}
</script>    

原文:https://www.xiaohuochai.cc/posts/5af8d9d7d749173d1452b82b

站长推荐

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

css position absolute相对于父元素的设置方式

大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。有时候我们需要在父元素的容器内设置相对的绝对位置

使用document.querySelector获取元素

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

什么是可替换元素?

请问什么是可替换元素和非可替换元素,它们的差异是什么?并举例说明。前端面试中 HTML 的题目本来就最少,而且并不难,翻来覆去也就那几样。我们之前已经谈到过最经典的 HTML 语义化 ,今天就借此机会来谈谈可替换元素。

HTML/CSS中空元素有哪些?

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

css父元素透明度(opacity)对子元素的影响

设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。设置父元素opacity:0.5,即使设置子元素opacity:1,子元素的opacity

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

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

Css元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,

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

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

DOM元素节点js常用操作

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :1. nodeName : 节点的名称;2. nodeValue :节点的值;3. nodeType :节点的类型

js元素创建的三种方式

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

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广