在javascript中,可以使用style對象屬性改變div背景顏色,語法格式為“元素對象.style.background="顏色值"”。Style 對象代表一個(gè)單獨(dú)的樣式聲明,可從應(yīng)用樣式的文檔或元素訪問Style對象。
本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
思路:點(diǎn)擊div改變背景顏色,是通過判斷點(diǎn)擊的次數(shù),達(dá)到改變背景顏色,主要運(yùn)用了數(shù)的加,累加。
代碼;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js實(shí)現(xiàn)點(diǎn)擊div改變背景顏色</title> <style> div{ background: red; width: 100px; height: 100px; } </style> </head> <body> <div></div> </body> <script type="text/javascript"> var div=document.getElementsByTagName("div")[0];/*通過標(biāo)簽名div組*/ var count=0;/*計(jì)數(shù),從0開始,每點(diǎn)擊一下加一*/ div.onclick = function () { /*給div綁定點(diǎn)擊函數(shù)*/ count ++; /*判斷點(diǎn)擊的次數(shù),來改變背景顏色*/ if(count % 3==1){ this.style.background="yellow" }else if(count % 3==0){ this.style.background="red" }else { this.style.backgroundColor="#ff9000" } } </script> </html>
【推薦學(xué)習(xí):javascript高級教程】