京东广告关闭.jpg
//对于这个style真的有点不明白
<style>
*{
padding:0;
margin:0;}
.top-banner{
background-color:pink;
height:80px;
}
.w{
width:1210px;
margin:10px auto;
position:relative;
}
img{
width:1210px;
height:80px;
backgroun-color:blue;
}
a{
position:absolute;
rop:5px;
right:5px;
color:#fff;
backgroun-color:#fff;
text-decoration:none;
width:20px;
height:20px;
font:100 14px/20px "simsum";
text-align:center;
}
.hide{
display:none!improtant;
}
</style>
<body>
<div class = "top-banner" id="topBanner">
<div class ="w">
<img src="" alt=""/>
<a href="#" id="closeBanner">
</div>
<script>
//需求：点击案例，隐藏盒子
//思路：点击a链接，让top-banner这个盒子隐藏
//步骤：
//1.获取事件源和相关元素
//2.绑定事件
//3.书写事件驱动程序
//1
var closeBanner = document.getElementById("closeBanner");
var topBanner = document.getElementById("topBanner");
//2.
closeBanner.onclick = function(){
//3
//控制类
topBanner.className += "hide";//保留原类名，添加新类名
topBanner.className = "hide";//替换新类名
topBanner.style.display = "none";
</body>
