添加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');

javascript 专栏收录该内容 57 篇文章 0 订阅 订阅专栏

我们都知道通过className属性设置某个元素的class属性时将替换该元素原有的class设置。

如果需要的的“追加”效果而不是“替换”，可以利用字符串拼接操作，把新的class设置追加到className属性上去。

elem.className += " intro"; //注意：intro的第一个字符是空格

1

为了方便使用，可以封装一个addName函数。这个函数带两个参数：第一个是需要添加新class的元素（element），第二个是新的class设置值（value）。

function addName(element,value){
	if(!element.className){
		element.className = value;
	}else{
		newClassName = element.className;
		newClassName+= " ";
		newClassName+= value;
		element.className = newClassName;
	}	
}