JavaScript教程：点击按钮动态改变HTML元素背景色（两种方法）-html教程-PHP中文网

JavaScript教程：点击按钮动态改变HTML元素背景色（两种方法）

php中文网

发布： 2025-12-08 09:02:20

原创

567人浏览过

JavaScript教程：点击按钮动态改变HTML元素背景色（两种方法）

本教程将详细介绍如何使用javascript在用户点击按钮时动态改变特定html元素的背景颜色。我们将探讨两种主要方法：直接通过javascript修改元素的`style`属性，以及通过添加或移除css类来控制样式。通过示例代码和最佳实践，帮助开发者理解并实现页面元素的交互式样式更新。

在现代Web开发中，根据用户的交互行为（如点击按钮）动态更新页面元素的样式是提升用户体验的关键。本教程将以点击按钮改变特定

标签背景色为例，深入讲解两种核心的JavaScript实现方法。

准备工作：HTML结构与基础CSS

首先，我们需要一个基础的HTML结构，包含一个目标

标签和一个触发样式改变的

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态改变背景色</title>
    <style>
        p {
            box-sizing: border-box;
            border: 1px solid black;
            height: 20px;
            width: 300px;
            text-align: center;
            padding: 5px; /* 添加一些内边距 */
        }
    </style>
</head>
<body>
    <p class="welcome">欢迎来到我的领域</p>
    <button id="btn">点击改变背景色</button>

    <script>
        // JavaScript代码将在此处添加
    </script>
</body>
</html>

登录后复制

我们为

标签添加了一个class="welcome"，这有助于我们在JavaScript中精确地选择该元素。

方法一：直接操作元素的style属性

这种方法通过JavaScript直接访问并修改DOM元素的style属性。它适用于简单、直接的样式修改场景。

Animate AI

Animate AI是个一站式AI动画故事视频生成工具

234

查看详情

立即学习“Java免费学习笔记（深入）”；

实现原理

通过ID获取触发事件的按钮元素。
为按钮添加一个点击事件监听器。
在事件处理函数中，通过类选择器获取目标
元素。
直接设置目标元素的style.backgroundColor属性为新的颜色值。

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直接操作style属性</title>
    <style>
        p {
            box-sizing: border-box;
            border: 1px solid black;
            height: 20px;
            width: 300px;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>
<body>
    <p class="welcome">欢迎来到我的领域</p>
    <button id="btn">点击改变背景色</button>

    <script>
        function setupButtonHandler() {
            const btn = document.getElementById('btn');
            btn.addEventListener('click', function onClick(event) {
                // 获取目标P元素
                const welcomeParagraph = document.querySelector('.welcome');
                // 直接修改其背景颜色
                if (welcomeParagraph) {
                    welcomeParagraph.style.backgroundColor = 'black';
                    welcomeParagraph.style.color = 'white'; // 同时改变文字颜色以提高对比度
                }
                // 示例：同时改变body的文字颜色
                document.body.style.color = 'red';
            });
        }
        setupButtonHandler();
    </script>
</body>
</html>

登录后复制

代码解析

document.getElementById('btn')：通过ID获取按钮元素。
btn.addEventListener('click', ...)：为按钮添加点击事件监听器。当按钮被点击时，onClick函数将被执行。
document.querySelector('.welcome')：通过CSS选择器获取第一个匹配class="welcome"的元素。这是获取单个元素的常用方法。
welcomeParagraph.style.backgroundColor = 'black';：这是核心步骤。style属性提供对元素内联样式的访问。通过设置style.backgroundColor，我们直接改变了该元素的背景色。
if (welcomeParagraph)：这是一个良好的实践，用于确保元素确实存在，避免对null或undefined进行操作。

优点与缺点

优点： 直接、简单，适用于快速实现少量样式修改；可以动态设置任何CSS属性值。
缺点： 将样式逻辑混入JavaScript，可能导致代码不易维护，特别是当样式修改复杂时；生成的样式是内联样式，优先级高，可能覆盖CSS文件中定义的样式；不利于样式的复用和管理。

方法二：通过切换CSS类来改变样式

这种方法将样式定义在CSS文件中，然后通过JavaScript动态地添加或移除元素的CSS类。这是更推荐的做法，因为它遵循了关注点分离的原则（HTML负责结构，CSS负责样式，JavaScript负责行为）。

实现原理

在CSS中定义一个包含目标样式的类（例如instance-change）。
获取触发事件的按钮元素。
为按钮添加一个点击事件监听器。
在事件处理函数中，获取目标
元素。
使用目标元素的classList属性（特别是toggle()方法）来添加或移除预定义的CSS类。

示例代码

首先，更新HTML中的

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过切换CSS类</title>
    <style>
        p {
            box-sizing: border-box;
            border: 1px solid black;
            height: 20px;
            width: 300px;
            text-align: center;
            padding: 5px;
            transition: background-color 0.3s ease, color 0.3s ease; /* 添加过渡效果 */
        }

        /* 定义一个用于改变背景色的CSS类 */
        .instance-change {
            background-color: black;
            color: white; /* 改变文字颜色以提高对比度 */
        }
    </style>
</head>
<body>
    <p class="welcome">欢迎来到我的领域</p>
    <button id="btn">点击改变背景色</button>

    <script>
        function setupButtonHandler() {
            const btn = document.getElementById('btn');
            btn.addEventListener('click', function onClick(event) {
                // 获取目标P元素
                const welcomeParagraph = document.querySelector('.welcome');
                // 使用classList.toggle()方法切换CSS类
                if (welcomeParagraph) {
                    welcomeParagraph.classList.toggle('instance-change');
                }
            });
        }
        setupButtonHandler();
    </script>
</body>
</html>

登录后复制

代码解析

.instance-change { background-color: black; color: white; }：在CSS中定义了一个名为instance-change的类，它包含了我们希望应用到元素上的样式。
welcomeParagraph.classList.toggle('instance-change');：这是关键。classList属性是一个DOMTokenList对象，它提供了方便的方法来操作元素的类名。
- toggle('className')：如果元素当前不包含className，则添加它；如果包含，则移除它。这使得每次点击按钮时，样式都能在两种状态之间切换。

优点与缺点

优点：
- 关注点分离： 样式完全由CSS管理，JavaScript只负责控制类的添加和移除。
- 易于维护和扩展： 改变样式只需修改CSS类定义，无需触碰JavaScript。可以轻松添加更多样式或动画。
- 样式复用： 定义好的CSS类可以在多个元素上复用。
- 性能优化： 浏览器通常能更有效地处理CSS类的切换。
缺点： 对于非常简单、一次性的样式修改，可能显得稍微繁琐。

选择哪种方法？

对于简单、一次性、且不涉及复杂逻辑的样式修改，例如仅改变一个元素的单一属性，方法一（直接操作style属性）可能更直接。
对于涉及多个样式属性、需要维护、或者需要实现样式切换/动画的场景，方法二（切换CSS类）是更专业、更推荐的做法。它提高了代码的可读性、可维护性和扩展性。

注意事项与最佳实践

元素选择器的准确性： 确保你正确地选择了目标元素。document.getElementById()用于ID选择，document.querySelector()用于第一个匹配的CSS选择器，document.querySelectorAll()用于所有匹配的CSS选择器（返回NodeList）。
事件监听器的正确使用： addEventListener()是现代JavaScript中推荐的事件处理方式，它允许为同一事件添加多个处理函数。
避免全局样式污染： 尽量使用特定类名或ID来限制样式修改的范围，避免无意中影响到其他元素。
可访问性： 当改变背景色时，请确保文字颜色有足够的对比度，以保证良好的可读性。
性能： 频繁地直接操作style属性可能导致浏览器重绘和回流，影响性能。切换CSS类通常更高效，因为浏览器可以更好地优化类名变更。

总结

本教程详细介绍了通过JavaScript点击按钮动态改变HTML元素背景色的两种主要方法。直接操作style属性适合快速简单的样式修改，而通过切换CSS类则是更符合Web开发最佳实践的方案，它将样式与行为分离，提高了代码的可维护性和可扩展性。在实际开发中，建议优先考虑使用CSS类切换的方法来实现动态样式更新。

以上就是JavaScript教程：点击按钮动态改变HTML元素背景色（两种方法）的详细内容，更多请关注php中文网其它相关文章！