如何添加类到元素只有它已经没有它？

Question

如何将元素添加到元素只有当它已经没有它？假设我们不知道元素是否有class="desired_class ...，但我们想让它舒服一些。

Answer 1

试试这个

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

Answer 2

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

Answer 3

你确定你想只用jQuery来做到这一点？你可以用简单的JavaScript来做到这一点。

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

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

Answer 4

 

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

Answer 5

此外，您还可以使用classList属性和它的add()方法：

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

如果元素没有它的类名称将只增加。

更多classList： https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Answer 6

我写检查，如果类将它添加到元素之前存在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);

<div id="some-element"></div>

Answer 7

在普通的JavaScript检查类别的存在。在这里，我检查EL（元素）具有tempClass或不

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

... 

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