仅当它已经没有它时如何将类添加到元素？答案

【问题标题】：How to add class to element only if it already does not have it?仅当它已经没有它时如何将类添加到元素？
【发布时间】：2012-03-19 22:06:54
【问题描述】：

只有在元素没有类的情况下，如何将类添加到元素中？假设我们不知道元素是否有class="desired_class ...，但我们想确保它有。

【问题讨论】：

标签： javascript jquery html css class

【解决方案1】：

另外，您可以使用classList 属性，它是add() 方法：

var element = document.getElementById('myElement');
element.classList.add('myClass');

只有当元素没有类名时才会添加类名。

【讨论】：

轻松获得最佳答案。不知道为什么没有更多的赞成票。
遗憾的是不在 IE 9 中，如果这对你很重要的话。来源：caniuse.com/#feat=mdn-api_domtokenlist_add

【解决方案2】：

试试这个

var elem = $('selector');
if(!elem.hasClass('desired_class')){
  elem.addClass('desired_class');
 }

【讨论】：

【解决方案3】：

我编写了一个仅限 JavaScript 的函数，用于在将类添加到元素之前检查该类是否存在。（您始终可以使用这里提到的classList，但对它的支持从 IE10 开始。）

function addClass(name, element) {
  var classesString;
  classesString = element.className || "";
  if (classesString.indexOf(name) === -1) {
    element.className += " " + name;
  }
}

var element = document.getElementById('some-element');

addClass("on", element); // Adds the class 'on'
addClass("on", element); // Ignored
addClass("on", element); // Ignored

document.write('Element classes: ' + element.className);

&lt;div id="some-element"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

使用下面的代码在普通的 javascript 中检查类的存在。这里我在检查 el (element) 有没有 tempClass

var el = document.getElementById("div1");

...

if (el.classList.contains("tempClass")){
   return true;
}

【讨论】：

【解决方案5】：

if ($('element').hasClass('some_class')) {
   $('element').addClass('class_name');
}

【讨论】：

这不起作用，因为 $(this) 不会引用 $('element')
为什么不只是$('element').addClass('class_name'); jquery 会为你检查类的存在

【解决方案6】：

您确定只使用 JQuery 吗？你可以用简单的 JavaScript 来做到这一点

    document.getElementById("elementId").getAttribute("class")

如果类属性不存在，会给你 null。

【讨论】：

这并不能解决问题。如果元素有一个类，但没有您有兴趣添加的类怎么办？

【解决方案7】：


if (!$("your_element").hasClass("desired_class")) {
  $("your_element").addClass("desired_class");
}

【讨论】：

这行不通，因为 $(this) 不会引用 $(your-element)

【解决方案8】：

这个问题的更新答案是使用toggleClass

 $( "element" ).toggleClass( "className" );

http://api.jquery.com/toggleclass/

【讨论】：

如果类已经存在，你的代码实际上会删除它。它会切换它。