JS修改元素样式方法全解析

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JS获取修改元素样式方法详解》，聊聊，希望可以帮助到正在努力赚钱的你。

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

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

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

为什么使用 classList

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

示例代码

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

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);
      }
    });
  });
};

代码解释：

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

注意事项

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

总结

通过使用 classList 属性和条件判断，可以方便地实现动态修改元素样式的效果。这种方法不仅代码简洁易懂，而且有利于样式的维护和复用。在实际开发中，可以根据具体的需求，灵活运用 classList 属性，从而提升用户体验。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~