添加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’);
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/230535.html原文链接：https://javaforall.net
