首頁猿問怎么樣讓它點擊兩次后還原成原來的顏色？

怎么樣讓它點擊兩次后還原成原來的顏色？

JavaScript

長風(fēng)秋雁 2018-08-10 11:10:51

現(xiàn)在的效果是三個紅色的小div點擊哪個就哪個就變成黃色同時其它的div都變成紅色現(xiàn)在想完善一下在上面這個基礎(chǔ)上點擊哪個div兩次還讓它還原成原來的顏色這個效果怎么弄呢？<!DOCTYPE html><html><head> <title></title> <style type="text/css"> #head{width: 400px;height: 500px;background-color: blue;margin: 0 auto;} #div1,#div2,#div3{width: 100px;height: 80px;background-color: red;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv1=document.getElementById('head'); var oDiv=oDiv1.getElementsByTagName('div') for(i=0;i<oDiv.length;i++){ oDiv[i].onclick=function(){ for(j=0;j<oDiv.length;j++){ oDiv[j].style.backgroundColor="red" this.style.backgroundColor="yellow" } } } } </script></head><body><div id="head"> <div id="div1"></div><br /> <div id="div2"></div><br /> <div id="div3"></div></div></body></html>

查看完整描述

1 回答

心有法竹

TA貢獻1866條經(jīng)驗獲得超5個贊

測試完畢，來得晚了點。代碼的關(guān)鍵解析在最下面。

<!DOCTYPE html><html><head>
    <title></title>
    <style type="text/css">
    #head{width: 400px;height: 500px;background-color: blue;margin: 0 auto;}    #div1,#div2,#div3{width: 100px;height: 80px;background-color: red;}    </style>
    <script type="text/javascript">
        window.onload = function(){            var oDiv1 = document.getElementById('head');            var oDiv = oDiv1.getElementsByTagName('div')            for(i = 0; i < oDiv.length; i++){
               oDiv[i].onclick=function(){                    for(j=0; j<oDiv.length; j++){                        if (this.getAttribute("style") == "background-color: yellow;") {                            this.style.backgroundColor = "red";
                        } else {
                            oDiv[j].style.backgroundColor = "red";                            this.style.backgroundColor = "yellow";
                        }
                    }
                }
            }
        }    </script></head><body><div id="head">
    <div id="div1"></div><br />
    <div id="div2"></div><br />
    <div id="div3"></div></div></body></html>

重點在于這邊，當自身被點中后，如果style是黃色，則改變自身，否則就按舊有邏輯走：

for(j=0; j<oDiv.length; j++){    if (this.getAttribute("style") == "background-color: yellow;") {        this.style.backgroundColor = "red";
    } else {
        oDiv[j].style.backgroundColor = "red";        this.style.backgroundColor = "yellow";
    }
}

以及，代碼格式希望注意一下，別讓人讀起來費勁，反正最后可以壓縮。

反對回復(fù) 2018-09-17