JS点击不同按钮切换页面的背景颜色

最新推荐文章于 2023-04-18 11:16:23 发布

叫我魏什么

最新推荐文章于 2023-04-18 11:16:23 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/Lou__Lan/article/details/127710789

版权

给页面渲染四个按钮，点击不同的按钮，给页面添加不同的类名，来实现页面背景颜色的变化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .yellow {
        background-color: yellow;
    }

    .green {
        background-color: green;
    }

    .black {
        background-color: black;
    }

    .recover {
        background-color: none;
    }
</style>

<body id="body">
    <button class="changeColor" id="yellow">点击变黄</button>
    <button class="changeColor" id="green">点击变绿</button>
    <button class="changeColor" id="black">点击变黑</button>
    <button class="changeColor" id="recover">点击恢复</button>
    <script>
        // 方法一：
        // let body = document.querySelector('#body');
        // yellow.addEventListener('click', () => {
        //     let yellow = document.querySelector('#yellow'); // 获取按钮节点
        //     body.setAttribute('class', 'yellow')   // 给节点添加class属性
        // })
        // green.addEventListener('click', () => {
        //     let green = document.querySelector('#green');// 获取按钮节点
        //     body.setAttribute('class', 'green')  // 给节点添加class属性
        // })
        // black.addEventListener('click', () => {
        //     let black = document.querySelector('#black');// 获取按钮节点
        //     body.setAttribute('class', 'black')  // 给节点添加class属性
        // })
        // recover.addEventListener('click', () => {
        //     let recover = document.querySelector('#recover');// 获取按钮节点
        //     body.setAttribute('class', 'recover')    // 给节点添加class属性
        // })

        
        // 方法二：
        let changeColor = document.querySelectorAll('.changeColor');
        console.log(changeColor);
        for (let i = 0; i < changeColor.length; i++) {
            changeColor[i].onclick = function () {
                if (i === 0) {
                    body.setAttribute('class', 'yellow')
                }
                if (i === 1) {
                    body.setAttribute('class', 'green')
                }
                if (i === 2) {
                    body.setAttribute('class', 'black')
                }
                if (i === 3) {
                    body.setAttribute('class', 'recover')
                }
            }
        }
    </script>
</body>

</html>