JS中的className操作

添加className

(1)修改元素的“所有”的 class

用新的 class 替换掉原有的所有 class，可以设置 className 属性：

document.getElementById("MyElement").className = "MyClass";

（如果想替换为多个 class，可以使用空格分隔。）

(2)为元素添加新的 class

如果想添加一个新的 class，并保留所有原有的 class，可以：

document.getElementById("MyElement").className += " MyClass";

（注意 MyClass 前面的空格。）

删除className

(1)删除元素的某个 class

如果要删除某个元素的单个 class 属性，而不影响其它 class，可以使用正则表达式进行替换：

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )

正则表达式解释：

(?:^|\s) # 匹配字符串开始，或者单个空白字符。以字符串开头或者以空格开头
MyClass  # 需要移除的 class 值
(?!\S)   # negative lookahead to verify the above is the whole classname
         # ensures there is no non-space character following
         # (i.e. must be end of string or a space)

g 可以进行全局匹配。

检查元素是否已经存在某 class

下面的正则表达式用来检查元素是否已经存在某个 class：

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

使用jQuery操作className

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

$('#MyElement').toggleClass('MyClass');

使用HTML5 操作 classes

现代浏览器都支持使用classList方法来操作元素的className，但是IE10中不支持该方法，即使使用了shim

document.getElementById("MyElement").classList.add('class');

document.getElementById("MyElement").classList.remove('class');

if ( document.getElementById("MyElement").classList.contains('class') )

document.getElementById("MyElement").classList.toggle('class');