1,element.style 行内样式操作
2,element.className 类名样式操作
3,如果给标签做点击事件,事件源,操作源都是同一个标签,可以使用this属性来代替指向
二,元素的显示与隐藏
1,display属性(重点,结合js实现样式操作)
display:none;隐藏对象
display:block,除了可以转换块元素性质外,还可以显示元素
注意:display隐藏元素后不再占据原来的位置
2,visibility:risible显示对象
visibility:hidden隐藏对象
注意:visibility属性隐藏元素后还占据原来的位置
多运用于显示广告和隐藏广告
案例练习----------关闭广告
<style>
*{margin: 0;
padding: 0;}
.adv{
width: 200px;
height: 200px;
background-color: blue;
position: fixed;
top: 50%;
margin-top: -100px;
font-size: 30px;
text-align: center;
line-height: 200px;
}
.hover{
width: 50px;
height: 50px;
background-color: azure;
font-size: 10px;
}
.close{
width: 200px;
height: 50px;
background-color: red;
position: relative;
top: 130px;
text-align: center;
}
</style>
</head>
<body>
<div class="adv">
我是广告
</div>
<div class="close">关闭广告</div>
<script>
var adv=document.querySelector('.adv');
var close=document.querySelector('.close')
var flag=false;
close.onclick=function(){
flag=!flag;
if(flag){
adv.style.display='none'
close.innerHTML="打开广告"
}else{
adv.style.display='block'
close.innerHTML="关闭广告"
}
}
</script>
</body>
结果呈现,点击关闭广告前
点击关闭广告后
这个案例结合了css中样式的呈现和js中DOM操作执行相结合,运用了css中定位,元素隐藏,等功能,运用了js中函数对象,if条件判断(开关法),事件的获取,样式最终的操作。