JavaScript 实现点击按钮动态修改元素背景色教程-html教程-PHP中文网

JavaScript 实现点击按钮动态修改元素背景色教程

碧海醫心

发布： 2025-12-05 09:37:01

原创

135人浏览过

JavaScript 实现点击按钮动态修改元素背景色教程

本教程详细介绍了如何使用 javascript 实现点击按钮动态修改 html 元素背景色的两种主要方法。第一种方法是直接通过 element.style 属性修改样式，适用于简单的、一次性的样式调整。第二种方法是利用 classlist.toggle() 切换预定义的 css 类，这种方式更具灵活性和可维护性，特别适合管理复杂样式或元素状态。

当我们需要在网页上实现交互效果，例如用户点击某个按钮后改变页面元素的颜色时，JavaScript 是不可或缺的工具。本教程将引导您了解如何通过 JavaScript 监听按钮点击事件，并动态地修改特定 HTML 元素的背景颜色。我们将探讨两种常用且有效的实现方式。

方法一：直接修改元素的 style 属性

这种方法通过 JavaScript 直接访问并修改 HTML 元素的 style 属性。它适用于需要进行简单、即时样式调整的场景，例如改变单一属性（如背景色、文本颜色等）。

实现步骤：

获取目标元素： 使用 document.getElementById() 或 document.querySelector() 获取需要修改样式的 HTML 元素。
监听按钮点击事件： 为按钮添加一个事件监听器，当按钮被点击时触发相应的 JavaScript 函数。
修改样式： 在事件处理函数中，通过目标元素的 style 属性设置新的背景颜色。

示例代码：

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

<!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;
            line-height: 20px; /* 使文本垂直居中 */
        }
    </style>
</head>
<body>
    <p class="welcome">Welcome To My Domain</p>
    <button id="btnChangeStyle">点击改变背景色</button>

    <script>
        // 确保DOM内容加载完毕后再执行脚本
        document.addEventListener('DOMContentLoaded', function() {
            // 获取按钮元素
            var btn = document.getElementById('btnChangeStyle');
            // 获取目标p标签元素，这里使用类名进行选择
            var welcomeParagraph = document.querySelector('.welcome');

            // 为按钮添加点击事件监听器
            btn.addEventListener('click', function() {
                // 直接修改p标签的背景颜色为浅蓝色
                welcomeParagraph.style.backgroundColor = 'lightblue';
                // 也可以同时修改文本颜色为深蓝色
                welcomeParagraph.style.color = 'darkblue';
            });
        });
    </script>
</body>
</html>

登录后复制

代码解释：

document.addEventListener('DOMContentLoaded', function() { ... });：确保在整个 HTML 文档加载并解析完毕后才执行 JavaScript 代码，防止因元素未加载而导致的错误。
document.getElementById('btnChangeStyle')：通过 ID 获取按钮元素。
document.querySelector('.welcome')：通过 CSS 选择器获取带有 welcome 类的 p 标签。
btn.addEventListener('click', function() { ... });：当 btn 元素被点击时，执行匿名函数中的代码。
welcomeParagraph.style.backgroundColor = 'lightblue';：将 welcomeParagraph 元素的背景颜色设置为 lightblue。请注意，CSS 属性名（如 background-color）在 JavaScript 中需要转换为驼峰命名法（backgroundColor）。

方法二：通过切换 CSS 类实现

这种方法通过在 JavaScript 中添加或移除预定义的 CSS 类来改变元素的样式。它提供了更好的样式和行为分离，使得代码更易于管理和维护，尤其适用于需要频繁切换多种样式状态或应用复杂样式组合的场景。

AiTxt 文案助手

AiTxt 利用 Ai 帮助你生成您想要的一切文案，提升你的工作效率。

查看详情

实现步骤：

定义 CSS 类： 在
获取目标元素： 与方法一相同，获取需要修改样式的 HTML 元素。
监听按钮点击事件： 为按钮添加一个事件监听器。
切换 CSS 类： 在事件处理函数中，使用 element.classList.toggle('className') 方法来添加或移除预定义的 CSS 类。

示例代码：

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

<!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;
            line-height: 20px;
            transition: background-color 0.3s ease; /* 添加平滑过渡效果 */
        }
        /* 定义一个用于改变背景和文本颜色的类 */
        .highlight-background {
            background-color: darkgreen;
            color: white;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p class="welcome">Welcome To My Domain</p>
    <button id="btnToggleClass">点击切换样式</button>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取按钮元素
            var btn = document.getElementById('btnToggleClass');
            // 获取目标p标签元素
            var welcomeParagraph = document.querySelector('.welcome');

            // 为按钮添加点击事件监听器
            btn.addEventListener('click', function() {
                // 切换 'highlight-background' 类
                // 如果元素没有这个类，就添加它；如果有，就移除它。
                welcomeParagraph.classList.toggle('highlight-background');
            });
        });
    </script>
</body>
</html>

登录后复制

代码解释：

.highlight-background：这是一个 CSS 类，定义了当元素具有此类时应应用的背景色、文本颜色和字体粗细。
welcomeParagraph.classList.toggle('highlight-background');：这是关键一步。classList 是一个 DOMTokenList 接口，提供了操作元素类名的方法。toggle() 方法会检查元素是否已拥有指定的类名：如果存在，则移除它；如果不存在，则添加它。这使得每次点击都能在两种样式状态之间切换。
transition: background-color 0.3s ease;：在 CSS 中添加此属性可以使背景颜色的变化更加平滑，提供更好的用户体验。

注意事项与总结

选择合适的方法：
- 直接修改 style 属性 适用于：
  - 简单的、一次性的样式调整。
  - 样式值是动态生成或计算的场景。
  - 仅需修改少数几个 CSS 属性。
- 切换 CSS 类 适用于：
  - 需要切换多种样式状态（例如，一个按钮的“激活”和“非激活”状态）。
  - 样式规则复杂，包含多个 CSS 属性。
  - 希望保持样式和行为分离，提高代码可维护性。
  - 利用 CSS 动画或过渡效果。
性能考量： 对于频繁的样式操作，尤其是涉及到大量元素时，直接操作 style 属性可能会导致更多的重绘和回流，影响性能。而通过切换 CSS 类，浏览器可以更好地优化渲染过程。
classList 的其他方法： 除了 toggle()，classList 还提供了其他有用的方法：
- add('className')：添加一个或多个类名。
- remove('className')：移除一个或多个类名。
- contains('className')：检查元素是否包含指定的类名，返回 true 或 false。
- replace('oldClass', 'newClass')：替换一个类名。