Javascript 防止元素具有重复的类名_Javascript

Javascript 防止元素具有重复的类名

javascript

Javascript 防止元素具有重复的类名,javascript,Javascript,我希望使用JavaScript防止元素上出现重复的类名当我运行下面的代码时，我得到了两次类名“test1” 这是我的HTML： <body> <div id="foo">Hey</div> </body> 我希望我的结果是： <div id="foo" class=" Test1 Test2">Hey</div> 嘿而不是 <div id="foo" class=" Test1 Test1 Test

我希望使用JavaScript防止元素上出现重复的类名

当我运行下面的代码时，我得到了两次类名

“test1”

这是我的HTML：

<body>
    <div id="foo">Hey</div>
</body>

我希望我的结果是：

<div id="foo" class=" Test1 Test2">Hey</div>

嘿

而不是

<div id="foo" class=" Test1 Test1 Test2">Hey</div>

嘿

有什么方法可以做到这一点吗？

在添加类时使用

string.contains（）

方法；试试像这样的东西

function addClass(element, myClass) {
   if(!element.className.contains(myClass))
       element.className += ' ' + myClass; 
}

function addClass(element, myClass) {
   if(element.className.split(" ").indexOf(myClass)==-1)
       element.className += ' ' + myClass; 
}

编辑

使用

string.split（“”）

将类名拆分（以避免与部分类名匹配），然后使用

indexOf

检查是否已添加该类。差不多

function addClass(element, myClass) {
   if(!element.className.contains(myClass))
       element.className += ' ' + myClass; 
}

function addClass(element, myClass) {
   if(element.className.split(" ").indexOf(myClass)==-1)
       element.className += ' ' + myClass; 
}

使用

indexOf（）

查看它是否已经具有该类。请注意，当类包含另一个类的一部分时，解决方案本身会导致问题，所以我对它做了一些修改（新的解决方案有点难看，但是meh）

我想，如果您要添加一个类，您希望该类具有优先级-如果它已经存在，但在级联中被另一个类取代，请将旧实例移动到类定义的末尾-

function addCLass(who,cname){
    var rx= RegExp('\\b'+cname+'\\b','g'),
    C=who.className.replace(rx,'').split(/\s+/).push(cname);
    who.className= C.join(' ');
}

因此，请检查

className

属性，查看您正在添加的类是否存在。这可能对您有所帮助：这在所有情况下都很好，除非它添加的类的名称是以前添加的类的子字符串。

string.contains（）

目前仅受firefox支持。为什么不

element.className.indexOf（myClass）=-1

？但是，@Tap所说的仍然是真的。啊，对不起，他们一定添加了它。尽管如此，ie9不支持它，也不应该用于一般用途的站点+1到目前为止，如果元素有一个

grapefraut

类，并且他想添加类

ape

，该怎么办？脚本不允许他这样做。请注意，如果您让类

btn变暗

，并尝试添加

btn

，则此操作将失败。@ChristoferEliassonUpdated@Zenith那么

class=“myClass otherClass”或class=“otherClass myClass”呢
？@Zenith仍然不可靠，如果元素最初已经定义了类。