网站换肤

最新推荐文章于 2024-06-16 15:15:05 发布

吴机智

最新推荐文章于 2024-06-16 15:15:05 发布

阅读量46

点赞数

分类专栏：案例文章标签： js

本文链接：https://blog.csdn.net/m0_49893750/article/details/108474784

版权

案例专栏收录该内容

45 篇文章 0 订阅

订阅专栏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>黄色</button>
    <button>绿色</button>
    <button>粉色</button>
    <script>
        // 点击每个按钮, 页面变成对应的颜色
        // 存储对应的颜色
        var arr = ['yellow', 'green', 'pink'];
        // 获取元素
        var btns = document.getElementsByTagName('button');
        console.log(btns);
        // 点击每一个按钮
        for(var i = 0; i < btns.length; i++){
            // 自定义索引
            btns[i].index = i;
            btns[i].onclick = function(){
                // 按钮与颜色的关系： 一一对应, 索引相同的
                console.log(arr[this.index]);
                document.body.style.background = arr[this.index];
            }
        }
    </script>
</body>
</html>