如何替换 HTML 中元素内的整个类？答案

【问题标题】：How to replace the entire class within the element in HTML?如何替换 HTML 中元素内的整个类？
【发布时间】：2021-11-13 00:08:17
【问题描述】：

我有一个像下面这样的 HTML，

var divId = document.getElementById('a1');
$(divId).find('#b1').className = "red";

.green {
  background-color: green;
  color: #ccc;
}

.red {
  background-color: red;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a1">
  <button id="b1" class="green">green</button>
</div>

<div id= "a2">
  <button id ="b2" class="red">red</button>
</div>

如何将Green 类替换为red 类？

【问题讨论】：

className 是 html 元素的属性，而不是 jquery 元素的属性。您可以使用attr 函数$(divId).find('#b1').attr('class', 'red'); 或香草javascript：document.querySelector('#a1 #b1').className = 'red';
一般来说，对类使用attr 和removeAttr 不是一个好主意，因为它们会删除元素的所有类。 addClass & removeClass 更好。

标签： javascript html jquery

【解决方案1】：

你在这里混淆了 jQuery 和 JavaScript。

您可以在 JavaScript 引用的元素中使用 className。要更改 jQuery 引用元素的 class，您应该使用.addClass()。另外，由于 id 属性在 DOM 中是唯一的，因此只需在选择器中指定 id 就足够了。

$('#b1').addClass('class', 'red');

jQuery 解决方案：

$('#b1').addClass('red');

.Green {
  background-color: green;
  color: #ccc;
}
.red {
  background-color:red;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id= "a1">
    <button id ="b1" class = "Green">Green</button>
</div>

<div id= "a2">
    <button id ="b2" class = "red">Red</button>
</div>

JavaScript 解决方案：建议您使用DOMTokenList.add() 向元素添加/删除class，而不是使用className。

var divId = document.getElementById('b1');
divId.classList.add('red');

var divId = document.getElementById('b1');
divId.classList.add('red');

.Green {
  background-color: green;
  color: #ccc;
}
.red {
  background-color:red;
  color: #fff;
}

<div id= "a1">
    <button id ="b1" class = "Green">Green</button>
</div>

<div id= "a2">
    <button id ="b2" class = "red">Red</button>
</div>

【讨论】：

非常感谢大家的支持。现在可以了！
@Dar，不客气:)

【解决方案2】：

$(divId).find 返回一个 jQuery 对象。

className 是原生 JavaScript 中 HTML 元素的 property。

您执行以下操作之一

jQuery prop 方法，用于设置 jQuery 对象的属性。
jQuery addClass 方法，用于在 jQuery 对象上添加类。
将 jQuery 对象转换为元素 (see SO answer)
绕过 jQuery 本身并改用 querySelector。

【讨论】：

【解决方案3】：

这对你有用：

$("#a1 #b1").removeClass("Green");
$("#a1 #b1").addClass("red");

【讨论】：