jsp页面div显隐web前端入门到实战元素显示隐蔽的9种思绪

把稳：如果要适用于任何元素须要提前储存元素的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实现元素的延时显示隐蔽

jsp页面div显隐web前端入门到实战元素显示隐蔽的9种思绪 Node.js

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

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>

专门建立的学习Q-q-u-n： 600610151 ，分享学习的方法和须要把稳的小细节，一直更新最新的教程和学习技巧（从零根本开始到前端项目实战教程，学习工具，全栈开拓学习路线以及方案）<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>