有时候我们要改变样式之前,需要先做条件判断,例如通过同一个按钮实现评论框的开关,这时我们就要先获取要操作的元素的CSS属性.
获取内联样式obj.style
<div id="comment" style="display:none;">评论框</div>
var comment = document.getElementById('comment');
console.log(comment.style.display);//none
- 使用这种方式的前提是,css需要用内敛样式的方式书写
获取外联样式或者在<style>中书写的样式getComputedStyle()
<style>
#light{
display:block;
}
</style>
<body>
<input type="button" value="关" id="btn"/>
<p id="light">我是灯</p>
<script>
document.getElementById('btn').onclick=function(){
var light = document.getElementById('light');
var btn = document.getElementById('btn');
var sty = window.getComputedStyle(light);
if(sty.display=='block'){
light.style.display='none';
btn.value='开';
}else{
light.style.display='block';
btn.value='关';
}
}
</script>
</body>
如果要兼容IE6-8,需写上兼容性代码
function getStyle(ele) {
var style = null;
if(window.getComputedStyle) {
style = window.getComputedStyle(ele, null);
}else{
style = ele.currentStyle;
}
return style;
}
网友评论