原生JavaScript实现addClass函数详解

原生JS实现addClass函数详解

该函数旨在为指定DOM元素添加CSS样式，功能类似于jQuery库中的addClass方法，即为匹配的元素追加指定的类名。

与jQuery中addClass要求传入字符串类型的CSS类名（多个类名需以空格分隔）一致，此函数也遵循相同的参数规范。

 
div{ border:1px solid #ccc; width:200px; height:200px;}
.a{ background:#900; }
.b{ font-size:30px; font-weight:bold;}

 
function addClass(elements, value)
{ 
if (!elements.className) {
elements.className = value;
} 
else
{ 
newClass = elements.className;
newClass += " ";
newClass += value;
elements.className = newClass;
} 
} 
window.onload = function ()
{ 
var test = document.getElementById('test');
alert(test.className);
addClass(test, 'a b');
//addClass(test, 'b');
} 

<div id="test">这里是测试层</div>