js修改html中classname,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');