試想一下如果網(wǎng)頁也可以隨意換膚那該是多么酷炫的一件事呢,今天就來一段簡單的換膚操作代碼,原創(chuàng)哦!
涉及到的知識點(diǎn):
1.事件監(jiān)聽及瀏覽器的兼容性;
2.getElementsByTagName()和getElementById()之間的區(qū)別;
前者獲取到的是節(jié)點(diǎn)的屬性,不能對節(jié)點(diǎn)進(jìn)行具體操作;
后者獲取到的是節(jié)點(diǎn)本身
代碼如下:
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';
}
