在jQuery中更改ClassName

Question

我知道我们可以做很多事情，例如更改元素的当前样式或更改其文本等。但是，我们如何使用jQuery更改类的名称？

例如，以下CSS文件有两种不同的样式：

.roundedCorners {
  /* code for roundedCorners */
}

.NotSoRoundedCorners {
  /* code for NotSoRoundedCorners */
}

按钮看起来像：

<input type="submit" class="NotSoRoundedCorners" value="Turn me on!" />

我知道我们可以通过简单的jQuery剪辑直接更改其样式：

$('.closer').css({'visibility': 'hidden'}, 1000); // ETC.

但是，如果要为一个元素更改许多样式，该怎么办？为什么不在CSS文件中只有2个样式定义，当我们需要更改样式时，只需将元素的类名更改为其他样式？

Answer 1

您应该调用jQuery的.toggleClass()^help方法。

使用它，您可以显式删除并将类添加到节点，而不会触及其他类。

$('.closer').toggleClass('roundedCorners NotSoRoundedCornders');

---

这里有很多人建议使用.attr()，但这会替换整个className属性，因此会覆盖/删除任何给定的css类。我认为不是那样的。

Answer 2

是。通过使用attr方法。

$('.NotSoRoundedCorners').attr('class', 'RoundedCorners');

Answer 3

$('#yourid').removeClass("NotSoRoundedCorners").addClass("roundedCorners");

Answer 4

$('.NotSoRoundedCorners').attr('class', 'RoundedCorners');

Answer 5

你可以使用：

$('.closer').toggleClass('roundedCorners').toggleClass('NotSoRoundedCorners')

或

$('.closer').removeClass('roundedCorners');
$('.closer').addClass('NotSoRoundedCorners')

Answer 6

真的，为什么不呢？

$('.closer').addClass("roundedCorners);
$('.closer').removeClass("NotSoRoundedCorners );

Answer 7

$('.closer').removeClass('roundedCorners');
$('.closer').addClass('NotSoRoundedCorners')