使用函数用 JS 更改 CSS

📌 相关文章

📜 使用函数用 JS 更改 CSS - 剥离所有 CSS 并重新添加由第二个参数传递的类 - 作为数组 - Javascript (1)

📅 最后修改于: 2023-12-03 14:49:53.068000 🧑 作者: Mango

在 Web 开发中，JavaScript 常用于动态地修改网页的样式。本文将介绍如何使用 JavaScript 函数来剥离所有 CSS，并重新添加由第二个参数传递的类，作为数组。

函数实现

以下是基于 JavaScript 的函数代码：

function replaceClasses(selector, newClasses) {
  var elements = document.querySelectorAll(selector);
  elements.forEach(function(element) {
    element.className = '';
    newClasses.forEach(function(className) {
      element.classList.add(className);
    });
  });
}

该函数接受两个参数：

selector：用于选择要修改类的元素的 CSS 选择器。
newClasses：用于替换现有类的新类的数组。

该函数使用 document.querySelectorAll() 方法获取所有匹配 selector 的元素，并使用 forEach() 方法遍历这些元素。对于每个元素，它首先将现有类全部删除，然后使用 classList.add() 方法将 newClasses 数组中的每个类添加到该元素的类列表中。

代码示例

以下是该函数在 HTML 中的使用示例：

<!DOCTYPE html>
<html>
<head>
  <style>
    .red {
      color: red;
    }
    .bold {
      font-weight: bold;
    }
  </style>
  <script>
    function replaceClasses(selector, newClasses) {
      var elements = document.querySelectorAll(selector);
      elements.forEach(function(element) {
        element.className = '';
        newClasses.forEach(function(className) {
          element.classList.add(className);
        });
      });
    }
    window.onload = function() {
      replaceClasses('.text', ['red', 'bold']);
    };
  </script>
</head>
<body>
  <p class="text">Hello World!</p>
</body>
</html>

上面的示例演示了如何在页面加载后使用 replaceClasses() 函数将 .text 元素的类剥离并添加 red 和 bold 类。在页面加载时，window.onload 事件将触发 replaceClasses() 调用。

总结

在 Web 开发中，使用 JavaScript 函数动态更改页面的样式是很常见的需求。该函数使得我们可以使用一个简单的函数调用来一次性更改所有选定的元素的类。这大大简化了样式修改过程，同时也使得代码更具维护性。