京東廣告關閉.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>
