📌  相关文章
📜  如何使用 js 更改背景颜色 - Javascript (1)

📅  最后修改于: 2023-12-03 14:51:59.721000             🧑  作者: Mango

如何使用JS更改背景颜色 - Javascript

在Web开发中，通常需要通过JS来操作DOM元素以实现交互效果，而更改背景颜色是其中常用的一种操作。下面，我们将介绍如何使用JS来更改页面的背景颜色。

HTML结构

首先，我们需要在HTML中建立一个包含背景颜色更改的按钮元素和一个用于显示颜色的div元素。代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JS更改背景颜色</title>
    </head>
    <body>
        <button id="color-btn">更改颜色</button>
        <div id="bg-color"></div>    
        <script src="color.js"></script>
    </body>
</html>
JS代码

接下来，我们需要在JS中编写更改背景颜色的代码。首先，我们需要通过DOM API获取按钮和div元素，在按钮上绑定一个点击事件，当按钮被点击时，设置div的背景颜色为一个随机生成的颜色值。完整的JS代码如下：

// 获取按钮和div元素
var btn = document.getElementById('color-btn');
var bgColor = document.getElementById('bg-color');

// 给按钮添加点击事件监听器
btn.addEventListener('click', function() {
    // 随机生成一个颜色值
    var color = '#' + Math.floor(Math.random()*16777215).toString(16);

    // 设置div的背景颜色为随机生成的颜色值
    bgColor.style.backgroundColor = color;
});
简要总结

通过这篇文章的介绍，我们了解了如何使用JS来更改页面的背景颜色。首先，我们在HTML中建立了一个包含背景颜色更改的按钮和一个用于显示颜色的div。然后，在JS中，我们获取了这两个元素，并在按钮上绑定了一个点击事件监听器。当按钮被点击时，我们随机生成一个颜色值，并将其设置为div的背景颜色，从而实现了更改背景颜色的效果。