如何更改 JavaScript 中的背景颜色？

2025年4月19日 | 阅读 4 分钟

什么是背景颜色？

使用背景颜色功能，可以为网页插入背景颜色。HTML 元素内的 background-color 属性将负责此功能。这会影响指定元素的整个大小，但边距除外。默认的背景颜色属性设置为透明。HTML 中的背景颜色使用命名值、HEX 颜色代码、RGB 颜色值或 HSL 值来定义。

更改背景颜色

这是基础但重要的功能，它会改变网页或 HTML 元素的背景颜色，代表着对 DOM 的操作。 JavaScript 提供了多种方法，例如直接调整 CSS 属性，使用事件监听器以及响应用户事件。

在开发网页内容时，它应该嵌入在 <body> 标签内。可以通过 JavaScript 中的 bgcolor 属性来更改网页的背景颜色。JavaScript 提供了多个属性来影响内容属性，从而决定元素的行为。属性值必须始终放在双引号内。语法如下：

语法

JavaScript 中有多种更改背景颜色的方法，本文将一一讨论。

更改背景颜色的方法

利用 style.backgroundColor 属性
使用 classList.add()
应用 setAttribute()
使用 addEventListener 方法

利用 style.backgroundColor 属性

更改元素背景颜色的简单方法是更改其 style 属性。该属性允许通过 JavaScript 直接更改元素的 CSS 属性。

语法

参数

document.body 代表整个网页。
style 允许你更改 CSS 样式。
backgroundColor CSS 属性允许更改背景颜色。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example to change the Background Color in JavaScript</title>
</head>
<body>
    <h2>Example to change the Background Color in JavaScript using style.backgroundColor property </h2>
    <button id="colorButton">Click here to change the background color</button>
    <script>
        document.getElementById("colorButton").addEventListener("click", function() {
            document.body.style.backgroundColor = "pink";
        });
    </script>
</body>
</html>

输出

How to Change Background Color in JavaScript?

当我们单击 “点击这里更改背景颜色” 时，背景颜色将变为粉红色，如下所示：

使用 classList.add()

你可以使用 classList.add() 为 div 添加一个 CSS 类，这将改变其背景颜色。

语法

参数

element：你想应用该类的 HTML 元素。
class1, class2, ., classN：一个或多个要包含的类名，例如通过用逗号分隔来添加多个类。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example to change background using classList.add() method</title>
    <style>
        .whiteBackground {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="myDiv" style="width: 150px; height: 200px; border: 2px solid red;">No Color</div>
    <button id="colorButton">Click here to change color of the box</button>
    <script>
        const div = document.getElementById("myDiv");
        const button = document.getElementById("colorButton");
        button.addEventListener("click", function() {
            div.classList.add("whiteBackground");
        });
    </script>
</body>
</html>

输出

点击标有 “点击此处更改盒子颜色” 的按钮后，盒子的背景颜色将变为浅蓝色，如下面的代码所示。

应用 setAttribute()

setAttribute() 函数允许你为元素分配一个属性。它可以用来立即更改 style 属性。

语法

参数

element： 需要更改其属性的 HTML 标签。
attributeName： 你想要更改或定义的特定属性名称（如 class、style 和 src）。
attributeValue： 我们需要分配给特定属性的新值。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration of altering the background via setAttribute</title>
</head>
<body>
    <div id="buttonEx" style="width: 150px; height: 100px; border: 3px solid blue;">No Color</div>
    <button id="buttonColor">Press this button to alter the background color.</button>
    <script>
        const div = document.getElementById("buttonEx");
        const button = document.getElementById("buttonColor");
        button.addEventListener("click", function() {
            div.setAttribute("style", "background-color: pink; width: 100px; height: 100px; border: 2px solid yellow;");
        });
    </script>
</body>
</html>

输出

当我们单击按钮 “按此按钮更改背景颜色” 时，效果如下：

使用 addEventListener 方法

JavaScript 提供了一种将事件链接到 HTML 元素的方法。addEventListener() 方法会监视诸如单击、鼠标移动或按键之类的事件，并在事件发生时运行特定的函数。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Illustration to modify the background using the addEventListener technique.</title>
</head>
<body>
    <div id="colorOfBox" style="width: 150px; height: 150px; border: 2px solid red;">No Color</div>
    <button id="button">Press this button to alter the color using addEventListener method</button>
    <script>
        const div = document.getElementById("colorOfBox");
        const button = document.getElementById("button");
        button.addEventListener("click", function() {
            div.style.backgroundColor = "yellow";
        });
    </script>
</body>
</html>

输出

当我们单击按钮 “按此按钮使用 addEventListener 方法更改颜色” 时，效果如下：

结论

Style.backgroundColor 适用于一次性、单步更改。
我们可以使用 classList.add() 来使样式更易于维护和重用。
当修改包含属性且相对复杂时，请使用 setAttribute()。
要处理单击事件，请使用 addEventListener()。

下一主题JavaScript 网格

如何更改 JavaScript 中的背景颜色？

什么是背景颜色？

更改背景颜色

更改背景颜色的方法

利用 style.backgroundColor 属性

使用 classList.add()

应用 setAttribute()

使用 addEventListener 方法

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何更改 JavaScript 中的背景颜色？

什么是背景颜色？

更改背景颜色

更改背景颜色的方法

利用 style.backgroundColor 属性

使用 classList.add()

应用 setAttribute()

使用 addEventListener 方法

结论

相关帖子

Javascript DOMContentLoaded 事件

Axios JavaScript

JavaScript 哈希表

Javascript 主机名

列表推导式在 JavaScript 中的用法

在 VS Code 中运行 JavaScript 代码

JavaScript 对象通过键获取值

从数组中移除元素

JavaScript reload() 方法