导语：元素的显示和隐藏，主要有三种方式：
元素的显示和隐藏就像我们打开网页的时候右下角弹出的广告一样，当你点击X过后广告就关闭，但是当你刷新页面的时候，广告就又重新出现在页面上，这就是元素的显示和隐藏，当你点击X的时候并不是真正意义上的把广告删除而是把广告隐play
1.display
display:none;隐藏元素，但是隐藏元素后，不在占有原来的位置
display:block;显示元素，同时还有把其他样式的标签转换位块级元素的作用
实战
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d">
<span id="s">
X
</span>
</div>
</body>
<style>
div{
background-color: aliceblue;
height: 100px;
width: 100px;
position: relative;
}
div>span{
height: 20px;
width: 20px;
position:absolute;
top: 0px;
left: 0px;
background-color: bisque;
}
</style>
<script>
var span=document.querySelector('#s');
var d=document.querySelector('#d');
span.addEventListener('click',function(){
d.style.display='none'
})
</script>
</html>
该代码实现了一个类似于广告弹窗的样式
2.visibility
该属性和上面讲到的display类似，唯一的不同就是display隐藏的元素，隐藏过后不在占有原来的位置，但是visibility隐藏元素以后占有原来的位置，各位小伙伴可以自己尝试一下。
visibility:hidden;隐藏元素，元素被隐藏了过后，依旧保留原来的位置。
visibility:visible;显示元素
实战
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d">
<span id="s">
X
</span>
</div>
<p>
123
</p>
</body>
<style>
div{
background-color: aliceblue;
height: 100px;
width: 100px;
position: relative;
}
div>span{
height: 20px;
width: 20px;
position:absolute;
top: 0px;
left: 0px;
background-color: bisque;
}
</style>
<script>
var span=document.querySelector('#s');
var d=document.querySelector('#d');
span.addEventListener('click',function(){
d.style.visibility='hidden'
})
</script>
</html>
3.overflow溢出内容的显示和隐藏
overflow的特性
实战
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="d">
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
ddddddddddddddddddddddddddddddddddddddssssssss
<span id="s">
X
</span>
</div>
<p>
123
</p>
</body>
<style>
div{
background-color: aliceblue;
height: 100px;
width: 100px;
position: relative;
}
div>span{
height: 20px;
width: 20px;
position:absolute;
top: 0px;
left: 0px;
background-color: bisque;
}
</style>
<script>
var span=document.querySelector('#s');
var d=document.querySelector('#d');
span.addEventListener('click',function(){
//d.style.overflow='hidden'
//d.style.overflow='scroll'
d.style.overflow='auto'
})
</script>
</html>
想自己看效果的同学可以把代码运行一下，就可以看到效果，毕竟实践出真知
版权声明：本文为m0_45245319原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。