使用javascript从元素中删除classname

Question

我从另一个Stack Overflow问题中找到了以下正则表达式:使用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);
})?

Answer 1

那是因为replace实际上并没有修改你调用它的字符串; 相反,它返回一个新字符串.所以:

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

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

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

要么:

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

)

Answer 2

别忘了classList.

el.classList.remove('boop');

http://jsfiddle.net/yXQL3/

Answer 3

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

或者使用jQuery(您似乎正在使用):

foo.removeClass( 'bar' );