點擊有驚喜案例
阿新 • • 發佈：2018-06-16
IT classname ali line font col 內容 yellow mage 
編輯本博客
- 通過getElementsByClassName獲取元素
- 通過this.style.background="red"來為元素設置樣式
- 通過this.innerText來獲取元素中文本內容或設置文本內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>點擊驚喜案例</title> <style type="text/css"> *{ paddingView Code: 0; margin: 0; } .box{ width: 100px; height: 100px; background-color: red; text-align: center; margin: 50px auto; line-height: 100px; } </style> </head> <body> <div class="box">點擊有驚喜</div> </body> <script type="text/javascript"> var oDiv=document.getElementsByClassName("box")[0] i=0 oDiv.onclick=function () { i++; if(i%4==1){ this.style.backgroundColor="yellow"; this.innerText="繼續點"; }else if(i%4==2){ this.style.backgroundColor="black"; this.style.color="white"; this.innerText="哈哈"; } else if(i%4==3){ this.style.backgroundColor="green"; this.style.color="white"; this.style.fontWeight="bold"; this.innerText="哈哈"; } else{ this.style.backgroundColor="red"; this.style.color="black"; // this.style.fontWeight="bold"; this.innerText="回去了"; } } </script> </html>
點擊有驚喜案例