使用 JavaScript 获取和修改元素样式-html教程-PHP中文网

使用 JavaScript 获取和修改元素样式

心靈之曲

发布： 2025-11-18 11:01:02

原创

895人浏览过

使用 javascript 获取和修改元素样式

本文档详细介绍了如何使用 JavaScript 来获取和修改 HTML 元素的样式。通过结合 `classList` 属性和条件判断，可以实现动态地改变元素的外观，从而增强用户交互体验。本文将提供代码示例，并讲解如何避免常见的错误，从而高效地操作元素样式。

使用 classList 属性动态修改元素样式

在 Web 开发中，经常需要根据用户的交互行为动态地改变页面元素的外观。JavaScript 提供了多种方式来实现这一点，其中一种推荐的方法是使用 classList 属性。classList 属性允许你添加、删除和切换元素的 CSS 类，从而改变其样式。

为什么使用 classList

直接修改元素的 style 属性虽然可以实现样式的改变，但它会覆盖原有的 CSS 样式，不利于样式的维护和复用。而 classList 属性则可以避免这个问题，它允许你操作元素的 CSS 类，从而更好地管理样式。

示例代码

以下是一个示例，展示如何使用 classList 属性来实现按钮的选中和取消选中效果：

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

图改改

在线修改图片文字

455

查看详情

window.onload = function() {
  const options = document.getElementsByClassName("button");
  const forward = document.getElementById("forward");

  Array.from(options).forEach(option => {
    option.addEventListener("click", () => {
      let keySelector = option.querySelector(".key-selector");

      if (option.classList.contains("selected-button")) {
        // 如果按钮已经被选中，则取消选中
        keySelector.style.color = "rgb(51, 51, 51)";
        keySelector.style.opacity = "0.6";

        option.style.backgroundColor = "rgb(226, 226, 226)";
        option.style.color = "black";
        option.style.opacity = "1";

        option.classList.remove("selected-button");
        console.log(option.className);
      } else {
        // 如果按钮未被选中，则选中
        option.style.backgroundColor = "rgb(77, 55, 120)";
        option.style.opacity = "0.65";
        option.style.color = "white";

        keySelector.style.color = "white";

        forward.style.color = "white";
        forward.style.backgroundColor = "rgb(77, 55, 120)";
        forward.style.transition = "1s ease";

        option.classList.add("selected-button");
        console.log(option.className);
      }
    });
  });
};

登录后复制

代码解释：

获取元素： 首先，通过 document.getElementsByClassName("button") 获取所有 class 为 "button" 的元素，以及 id 为 "forward" 的元素。
添加事件监听器： 使用 Array.from(options).forEach() 遍历所有按钮元素，并为每个按钮添加点击事件监听器。
条件判断： 在事件监听器中，使用 option.classList.contains("selected-button") 判断当前按钮是否已经被选中。
修改样式： 如果按钮已经被选中，则将其样式恢复为默认值，并使用 option.classList.remove("selected-button") 移除 "selected-button" 类。如果按钮未被选中，则改变其样式，并使用 option.classList.add("selected-button") 添加 "selected-button" 类。

CSS 样式

为了使上述代码生效，需要在 CSS 中定义 "button" 和 "selected-button" 类的样式：

.button {
  background-color: rgb(226, 226, 226);
  /* 其他样式 */
}

.selected-button {
  background-color: rgb(77, 55, 120);
  color: white;
  opacity: 0.65;
  /* 其他样式 */
}

登录后复制

HTML 结构

以下是 HTML 示例代码，展示了按钮的基本结构：

<div class="option">
  <div class="button">
    <div class="key-selector">
      <span>A</span>
    </div>
    <div class="text">1</div>
  </div>
</div>

登录后复制

注意事项

避免在页面加载时绑定事件监听器到不存在的元素： 确保在页面加载完成后再绑定事件监听器，可以使用 window.onload 或者将脚本放在 HTML 文档的底部。
使用 classList 代替 className： className 会覆盖元素原有的所有类，而 classList 允许你添加、删除和切换单个类，从而避免影响其他类。
性能优化： 避免频繁地操作 DOM 元素，尽量将样式修改合并到一次操作中。