使用javascript从元素中删除类名

Posted 2023-03-05

【中文标题】使用javascript从元素中删除类名

【英文标题】：Remove classname from element with javascript

【发布时间】：2012-04-15 03:08:11

【问题描述】：

我从另一个 Stack Overflow 问题中找到了以下正则表达式：Change an element's class with javascript

并且在我的部分脚本中成功使用了它，但是在另一个脚本中它似乎失败了。

我在 jsFiddle 上拼凑了一个非常简约的测试用例，它也失败了：

http://jsfiddle.net/ew47Y/1/

html：

<div class="foo" id="foo">
    hello
</div>​

JS：

$(document).ready(function()
     foo = document.getElementById('foo');
     foo.className += ' bar foobar';
     alert(foo.className);
     foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' )
     alert(foo.className);
)​

【问题讨论】：

我对混合使用 jQuery 和非 jQuery 来做 jQuery 简单化的事情感到困惑

我正在编写一个库，我发现让一个库需要另一个库是不好的做法。

请检查这个答案Remove and add css class using javascript

【参考方案1】：

那是因为replace 实际上并没有修改你调用它的字符串；相反，它返回一个新字符串。所以：

     foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' )

（顺便说一句，您实际上不需要在原始 JavaScript 中执行此操作，因为 jQuery 对象提供了 removeClass 方法：http://api.jquery.com/removeClass/。所以您可以编写：

     $('#foo').removeClass('bar');

或：

     $(foo).removeClass('bar');

)

【讨论】：

纯JS函数：function removeClass(e,c) e.className = e.className.replace( new RegExp('(?:^|\\s)'+c+'(?!\\S)') ,'');

如果要删除所有出现的类名，请使用正则表达式末尾的g modifier，如下所示：foo.className.replace(/(^|\s)bar(?!\S)/g ,'')。顺便说一句，这里不需要使用non-capturing group(?:)。

请注意，word boundary metacharacter \b 的使用，如：foo.className.replace(/\bbar\b/g ,'')，在这里不适合，因为单词边界也出现在单词字符[A-Za-z0-9_] 和破折号- 字符之间。因此一个类名，例如'different-bar-class' 也将被替换，从而导致 'different--class'。但是，与上述解决方案相反，“\b”解决方案不会删除类名前的空白字符\s，因此是一个字符串，例如'firstbar bar' 将以 'firstbar' 结尾。

@Adam：我不知道你在说什么。你的评论是这个页面上唯一提到\b的地方，所以你几乎不需要解释为什么它不合适。并且需要使用组；您个人对捕获组 (...) 而非非捕获组 (?:...) 的偏好对其他人不感兴趣。

前瞻中的双重否定 (?!\S) 似乎没有必要。我宁愿用(?=\s|$)，看起来更清晰。

【参考方案2】：

别忘了classList。

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/

【讨论】：

无法（仅）在 IE 8、9 和 Opera Mini 8 上工作 caniuse.com/#feat=classlist

【参考方案3】：

foo.className = foo.className.replace( /(?:^|\s)bar(?!\S)/ , '' );

或使用 jQuery（您似乎正在使用）：

foo.removeClass( 'bar' );

【参考方案4】：

还有一个使用word boundary metacharacter \b的解决方案：

foo.className.replace(/\bbar\b/g ,'');

这可能适合某人，但请注意单词边界也出现在单词字符 [A-Za-z0-9_] 和破折号 - 字符之间。因此一个类名，例如'different-bar-class' 也将被替换，导致 'different--class'。但是，与上述解决方案相反，“\b”解决方案不会删除可能需要的类名之前的空格字符\s，因此字符串例如'firstbar bar' 最终会变成 'firstbar'。

【参考方案5】：

OP 的链接帖子中的top answer 以及related answer 展示了如何在现代浏览器中使用纯 JavaScript 而不使用正则表达式来执行此操作，如下所示：

element.classList.remove("classname");

有关更多详细信息和示例，请参阅documentation。我最喜欢的是使用toggle("classname") 相应地添加或删除classname。

编辑：刚刚看到similar answer 已经在这里发布，所以应该去那里点赞。将其留在这里用于链接和toggle 位。