用JavaScript语言编写：点击对应颜色的小方块更换主题颜色

最新推荐文章于 2023-04-14 11:36:00 发布

原创最新推荐文章于 2023-04-14 11:36:00 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

web前端专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何使用JavaScript编程，实现用户点击不同颜色的小方块，即时更改网站的主题颜色，提供个性化的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用JavaScript语言编写：点击对应颜色的小方块更换主题颜色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div, ul {
            margin: 0;
            padding: 0;
        }
        .first {
            height: 50px;
            /*outline: 1px solid red;*/
        }
        .second {
            height: 400px;
            outline: 1px solid gray;
        }
        #change {
            height: 370px;
        }
        .first>div {
            float: right;
            width: 30px;
            height: 30px;
            /*outline: 1px solid red;*/
            margin: 5px;
            margin-top: 9px;
        }
        .first>div:nth-child(1) {
            background-color: pink;
        }
        .first>div:nth-child(2) {
            background-color: blue;
        }
        .first>div:nth-child(3) {
            background-color: orange;
        }
        .second>div:first-child {
            height: 40px;
            /*outline: 1px solid red;*/
            background-color: gray;
        }
        ul {
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div class="first">
        <div id="pink" onclick="document.getElementById('change').style.backgroundColor='pink'"></div>
        <div id="blue" onclick="document.getElementById('change').style.backgroundColor='blue'"></div>
        <div id="orange" onclick="document.getElementById('change').style.backgroundColor='orange'"></div>
    </div>
    <div class="second">
        <div></div>
        <div id="change">
            <ul>
                <li>小明回去好好看课堂代码，还有救，不要放弃</li>
                <li>小红也回去一起好好加油看代码</li>
                <li>小王也是</li>
                <li>你们今天太棒了，表扬一下</li>
            </ul>
        </div>
    </div>
</body>
<script type="text/javascript">

</script>
</html>