试想一下如果网页也可以随意换肤那该是多么酷炫的一件事呢,今天就来一段简单的换肤操作代码,原创哦!
涉及到的知识点:
1.事件监听及浏览器的兼容性;
2.getElementsByTagName()和getElementById()之间的区别;
前者获取到的是节点的属性,不能对节点进行具体操作;
后者获取到的是节点本身
代码如下:
html代码:
<body class="color1" id="body">
<button id="button">改变</button>
</body>
css代码:
.color1{background-color: #000;}
.color2{background-color: #ccc;}
js代码:
var btn = document.getElementById('body');
if (btn.addEventListener) {
btn.addEventListener('click',check,false);
}else if (btn.attachEvent) {
btn.attachEvent('onclick',check);
}else{
btn['onclick'] = check();
}
function check(){
var color = document.getElementById('body');
color.className = color.className == 'color1'?'color2':'color1';
}
网友评论