京東廣告關(guān)閉.jpg
//對(duì)于這個(gè)style真的有點(diǎn)不明白
<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>
//需求：點(diǎn)擊案例官脓，隱藏盒子
//思路：點(diǎn)擊a鏈接，讓top-banner這個(gè)盒子隱藏
//步驟：
//1.獲取事件源和相關(guān)元素
//2.綁定事件
//3.書(shū)寫(xiě)事件驅(qū)動(dòng)程序
//1
var closeBanner = document.getElementById("closeBanner");
var topBanner = document.getElementById("topBanner");
//2.
closeBanner.onclick = function(){
//3
//控制類(lèi)
topBanner.className += "hide";//保留原類(lèi)名污桦，添加新類(lèi)名
topBanner.className = "hide";//替換新類(lèi)名
topBanner.style.display = "none";
</body>
