點亮盒子

點亮盒子.jpg
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        button {
            margin: 10px;
            width: 100px;
            height: 40px;
            cursor: pointer;
        }
        .current {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <button>按鈕1</button>
    <button>按鈕2</button>
    <button>按鈕3</button>
    <button>按鈕4</button>
    <button>按鈕5</button>

    <script>
        //需求：鼠標放到哪個button上，改button變成黃色背景（添加類）
        //步驟：
        //1.獲取事件源
        //2.綁定事件
        //3.書寫事件驅動程序

        //1.獲取事件源
        var btnArr = document.getElementsByTagName("button");
        //2.綁定事件
        for(var i=0;i<btnArr.length;i++){
            btnArr[i].onmouseover = function () {
                //排他思想（干掉所有人，剩下我一個）
                //排他思想是和for循環(huán)連用
                for(var j=0;j<btnArr.length;j++){
                    btnArr[j].className = "";
                }
                this.className = "current";
            }
        }
        //3.書寫事件驅動程序


    </script>

</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容