数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究CSS Display 和 Visibility 的区别
我们可以分别使用 CSS Visibility 和 CSS Display 属性来隐藏或删除 HTML 文档中的元素。对用户来说，使用这两个属性可能似乎没有区别，但确实有区别。
CSS Display − none 不会在文档中呈现元素，因此不会为其分配任何空间。
CSS Visibility − hidden 会在文档中呈现元素，甚至会分配空间，但用户不可见。
示例
让我们看一个 CSS Display none 的示例 −
<!DOCTYPE html>
<html>
<head>
<title>CSS Display None</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Display-None</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="displayNone()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function displayNone(){
for(var i=0; i<3; i++)
primaryColor[i].style.display = 'none';
}
</script>
</body>
</html>输出
这将生成以下输出 −
在点击‘隐藏原色’按钮之前 −
在点击‘隐藏原色’按钮之后 −
示例
让我们看一个 CSS Visibility hidden 的示例 −
<!DOCTYPE html>
<html>
<head>
<title>CSS Visibility hidden</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
box-sizing: border-box;
}
input[type="button"] {
border-radius: 10px;
}
.child{
display: inline-block;
height: 40px;
width: 40px;
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS-Visibility-hidden</legend>
<div id="container">
<div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
</div><br>
<input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
</fieldset>
</form>
<script>
var primaryColor = document.getElementsByClassName('primary');
function visibilityHidden(){
for(var i=0; i<3; i++)
primaryColor[i].style.visibility = 'hidden';
}
</script>
</body>
</html>输出
这将生成以下输出 −
在点击‘隐藏原色’按钮之前 −
在点击‘隐藏原色’按钮之后 −
更新于： 2020 年 1 月 7 日
2K+ 浏览次数
广告