jQuery 移除所有元素的样式属性

在本文中，我们将介绍如何使用 jQuery 移除所有元素的样式属性。如果我们需要批量删除一个页面上所有元素的样式，或者需要重新设置样式，而不想逐个修改每个元素，这个功能就非常有用。

使用removeAttr()方法移除样式属性

jQuery 提供了removeAttr()方法，可以用来移除元素的指定属性。我们可以将这个方法应用在*选择器上，来移除所有元素的样式属性。

$("*").removeAttr("style");

在上面的示例中，我们使用*选择器选中了页面上的所有元素，并使用removeAttr()方法移除了它们的style属性。这样一来，所有元素的样式都将被清除。

示例

假设我们有以下 HTML 页面：

<!DOCTYPE html>
<html>
<head>
  <title>示例页面</title>
  <style>
    .red-text {
      color: red;
    }
    .bold-text {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1 class="red-text">这是标题</h1>
  <p class="bold-text">这是段落</p>
  <div>
    <p>This is a div.</p>
  </div>
</body>
</html>

我们想要将所有元素的样式属性清空。

$(document).ready(function() {
  $("*").removeAttr("style");
});

在这个示例中，我们使用$(document).ready()来确保 HTML 页面已经加载完毕后运行代码。然后，我们使用$("*")选择了页面上的所有元素，并使用removeAttr("style")方法移除了它们的style属性。这样，所有元素的样式都将被移除。

使用addClass()方法重新设置样式

有时候，我们不仅仅需要移除元素的样式属性，还需要重新设置样式。为了实现这个目的，我们可以使用addClass()方法给元素添加样式类。

$(element).addClass("new-class");

上述示例中，我们使用addClass()方法给指定的元素添加了一个名为new-class的样式类。

示例

假设我们继续上面的示例，我们现在想要重新设置元素的样式。

$(document).ready(function() {
  $("*").removeAttr("style");

  $(".red-text").addClass("new-red-text");
  $(".bold-text").addClass("new-bold-text");
});

在这个示例中，我们首先使用$("*").removeAttr("style")删除了所有元素的样式属性。然后，我们使用$(".red-text").addClass("new-red-text")重新给具有red-text类的元素添加了new-red-text类。同样地，我们使用$(".bold-text").addClass("new-bold-text")给具有bold-text类的元素重新添加了new-bold-text类。