深入理解CSS元素可见性visibility_html/css_WEB-ITnose
× 目录 [1]定义 [2]属性 [3]display [4]JS [5]transition [6]API [7]DEMO
前面的话
visibility属性常见于与display属性的比较中。但实际上，该属性有自己的一些有趣的用途。本文将就visibility属性作详细整理和说明
定义
visibility
值: visible | hidden | collapse | inherit
初始值: visible
应用于: 所有元素
继承性: 有
属性
visible: 元素可见
hidden:元素不可见，但元素还是会影响文档的布局
[注意]可以将一个hidden元素的后代元素置为visible，这会使该后代元素正常出现
collapse:在表格中
[注意]webkit内核浏览器不支持给
display
visibility:hidden与display:none作为隐藏元素的两种方式，常常被人们拿来比较。其实区别很简单，前者不脱离文档流，保留隐藏之前元素占据的物理区域；而后者则脱离文档流，如果重新显示则需要页面的重新绘制
JS
当元素通过设置visibiliy:hidden之后，虽然还占据物理区域，但已经不可以接受js效果
//js效果:当鼠标移入元素时，父级的背景颜色变成黑色；移出时背景颜色恢复初始值
transition
其实visibility是离散步骤，在0到1数字范围之内，0表示隐藏，1表示显示。visibility:hidden可以看成visibility:0；visibility:visible可以看成visibility:1。于是，visibility应用transition等同于0~1之间的过渡效果。实际上，只要visibility的值大于0就是显示的。由于这个现象，我们可以利用transition实现元素的延时显示隐藏
#oShow{ visibility: visible; transition: visibility 0.2s 0.5s;}#oShow:hover{ visibility: hidden;}visibility配合opacity和transtion可以实现真正的元素淡入淡出。如果只用opacity时，即使最后元素opacity变为0，但实现上该图片还是可以覆盖其他元素以及可以接受js效果。所以使用visibility可以实现元素真正的隐藏
#oShow{ visibility: visible; opacity: 1; transition: 1s;}#oShow:hover{ visibility: hidden; opacity: 0;}
API
当前浏览器大部分都是多tab页(多标签页)的模式，但这些页面性能却参差不齐。对于某些性能很差的页面，当用户从其他tab页切换回来时，有可能出现由于页面性能差出现页面错乱、页面卡死甚至浏览器卡死的情况
HTML5新增了页面可见性API。该API有两个属性，一个事件
[注意]IE9-和safari浏览器不支持。所以可以通过document.hidden !== 'undefined'来做浏览器的识别
document.hidden: 表示当前页面是否可见
当前tab页处于激活态时，document.hidden的属性值是false，否则是true
document.visibilityState: 返回当前页面的可见状态
hidden: 当浏览器最小化、切换tab、电脑锁屏时visible: 用户正在查看当前页面时prerender: 文档加载离屏或者不可见unloaded: 当文档将要被unload时
[注意]prerender和undloaded不是所有浏览器都支持，用的也不多
visibilitychange事件: 当document.visibilityState状态变化时触发该事件
应用场景
[1]当页面属性是hidden时，停止页面中选项卡的定时器或页面中的动画等，减少内存占用
[2]当通过页面状态的切换，来控制音乐或视频的播放或停止
[3]...
DEMO
【1】页面为非激活页时，暂停页面中的动画；重新激活时，继续动画效果
.box{ width: 500px; background-color: lightgreen; border: 1px solid black;}@keyframes loop{ 0%{ width: 100px; } 100%{ width: 500px; }}#div{ width: 100px; height: 100px; background-color: pink; animation: loop 200s alternate infinite linear;}
<div class="box"> <div id="div"></div></div>
function getCSS(obj,style){ if(window.getComputedStyle){ return getComputedStyle(obj)[style]; } return obj.currentStyle[style];};var oTimer = setInterval(function(){ document.title=div.innerHTML = parseInt(getCSS(div,'width'));},100);document.addEventListener('visibilitychange',function(){ if(document.hidden){ div.style.animationPlayState = 'paused'; }else{ div.style.animationPlayState = 'running'; } },false);【2】页面切换来控制音乐的播放和暂停
<audio id="audio" src="http://7xpdkf.com1.z0.glb.clouddn.com/myocean.mp3" controls ></audio>
var mark;document.addEventListener('visibilitychange',function(){ if(document.hidden){ //如果用户在切换页面前，自己点了暂停 if(audio.paused){ mark = false; }else{ audio.pause(); mark = true; } }else{ //当暂停是因为页面切换造成的，则返回当前页面时，继续播放 if(mark){ audio.play(); } }},false);
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1655
14
1414
52
1307
25
1253
29
1227
24
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
HTML: The Structure, CSS: The Style, JavaScript: The Behavior
Apr 18, 2025 am 12:09 AM
The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.
The Future of HTML: Evolution and Trends in Web Design
Apr 17, 2025 am 12:12 AM
The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.
