js排他性开关。点击哪个哪个就变化，其他自动恢复。

程序员文章站 2022-04-15 16:34:11

...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>开关和排他</title>
    <style>
        #pt{width:100%;/*排他*/
            height:200px;
            border:2px dotted red;
            border-radius:20px;
       }
         span{
                float:left;
                padding:0 20px ;
                color:white;
                background-color:green;
                background-clip:content-box;
        }
        .kd{width:100px;
            height:200px;
            border:2px solid red;
            background:black;

        }

    </style>
    <script>
        window.onload=function(){
            var oSpan=document.getElementsByTagName("span");//获取span标签，伪数组
            for(var i=0;i<oSpan.length;i++){
                oSpan[i].onclick=function(){
                    for(var j=0;j<oSpan.length;j++){//每次点击其实都是将oSpan的所有元素进行属性配置
                        oSpan[j].innerText="嘿嘿";
                        oSpan[j].style.backgroundColor="green";//注意要加style

                    }
                    this.innerText="哈哈"
                    this.style.backgroundColor="red";
                }
            }
            //开灯，关灯训练。
            var oBtn=document.getElementById("btn");
            var oKd=document.getElementsByClassName("kd");
            oBtn.onclick=function(){

                if(oBtn.value=="开灯"){
                    oKd[0].style.backgroundColor="yellow";
                    oBtn.value="关灯";
                }
                else if(oBtn.value=="关灯"){
                    oKd[0].style.backgroundColor="black";
                    oBtn.value="开灯";
                }
            }

        }
    </script>
</head>
<body>
    <div id="pt">
        <span>嘿嘿</span>
        <span>嘿嘿</span>
        <span>嘿嘿</span>
        <span>嘿嘿</span>
        <span>嘿嘿</span>
        <span>嘿嘿</span>
        <span>嘿嘿</span>
    </div>

    <div>
        <input type="button" value="开灯" name="" id="btn">
        <div class="kd"></div>
    </div>

</body>