引入
大家注意这个效果
广告按钮，当我点击那个❌的时候，我们会发现广告自己会消失不见并且不会占有原来的位置。
这里就要用到一个css的知识，隐藏
display
display属性用于设置一个元素应如何显示。
none: 元素不会被显示。block: 元素显示为块级元素，像<p>、<div>这样的标签默认就是块级元素。块级元素会独占一行，上下都会有换行，并且可以设置宽度和高度。inline: 元素显示为内联元素，像<span>、<a>这样的标签默认就是内联元素。内联元素不会独占一行，元素之间可以并排显示，并且宽度和高度由内容决定，不能直接设置。inline-block: 元素显示为内联块级元素，这是inline和block的结合体。元素既可以并排显示，又可以设置宽度和高度。
后面三个我在前面的中介绍过了，如果不了解的话可以去看一下。
我们先来了解一下JavaScript中的一项基本知识，Dom
什么是Dom?
文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。
简单来说就是HTML中的元素在js中的存在形式。浏览器会根据吧html标签生成js对象，所有的标签都有对应的js对象。通过js对象我们可以操作这些标签的显示。
none
将元素从当前界面删除，会使元素从页面上完全消失并且不占有原来的位置，就像我上面介绍的京东的广告一样。
但是它并不会从DOM中删除，不是完全删除，只是从该页面删除。
原理
其实我们使用 CSS 的 display: none; 属性时，我们实际上是在告诉浏览器不要渲染这个元素，即使它仍然存在于 DOM 树中。这就像是我们关闭了一盏灯：物体仍然在那里，只是我们看不见它了。
其实这个要是不理解也没有关系，只是避免大家以为使用display:none就是删除整个标签的误解，所以这里会稍微的引入一下DOM这个概念。
案例
实现广告删除模块
效果展示
当我点击X
上面的1和下面的1紧挨。表明删除元素在页面中的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我是广告快删除我</title>
<style>
.gd{
position: relative;
width: 1200px;
height: 100px;
background-color: pink;
margin: 10px auto;
}
a{
text-decoration: none;
}
.delt{
position: absolute;
top:10px;
right: 10px;
}
</style>
</head>
<body>
<div>1</div>
<div class="gd">
<div class="delt">X</div>
</div>
<div>1</div>
<script>
//简单了解一下，这个就是我上面说的DOM操作
const gd = document.querySelector('.gd')
const delt = document.querySelector('.delt')
delt.addEventListener('click',function(){
gd.style.display = 'none'
console.log(1)
})
</script>
</body>
</html>visibility:
visibility 属性用于控制元素是否可见。它的属性值如下：
visible: 默认值，元素可见。hidden: 元素不可见，但仍占用页面上的空间。这意味着，即使元素被隐藏，它仍然会影响布局，就好像它仍然在那里一样。collapse: 主要应用于表格元素，如果用于非表格元素，效果与hidden相同。对于表格元素，当设置为collapse时，行或列会被隐藏，且不占用空间。inherit: 元素继承其父元素的visibility属性值。
依旧是广告演示
点击后
我们发现它保留位置。并不删除储存在这里的空间，这个能在那里使用呢？主要是当你的页面不能再有改变的时候，如果更改会造成你的页面直接塌陷的话，你需要使用这个模块来设置需要的关闭界面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我是广告快删除我</title>
<style>
.gd{
position: relative;
width: 1200px;
height: 100px;
background-color: pink;
margin: 10px auto;
}
a{
text-decoration: none;
}
.delt{
position: absolute;
top:10px;
right: 10px;
}
</style>
</head>
<body>
<div>1</div>
<div class="gd">
<div class="delt">X</div>
</div>
<div>1</div>
<script>
//简单了解一下，这个就是我上面说的DOM操作
const gd = document.querySelector('.gd')
const delt = document.querySelector('.delt')
delt.addEventListener('click',function(){
gd.style.visibility = 'hidden'
console.log(1)
})
</script>
</body>
</html>了解完这个快去动手写一个广告界面，挣大钱！！！！
标签：显示,DOM,元素,none,gd,delt,隐藏,页面 From： https://blog.51cto.com/u_16426526/9144112