09 JavaScript DOM技术-className属性

className属性

一，calssName主要作用

className属性是一个可读可写的的属性，若只要是元素节点都有className属性，可以使用className属性得到一个元素的class属性并且还能用于赋值操作。这个操作可以用来为对应节点设置已有的CSS样式。

方式

element.className = value

二，优化className属性操作

通过上述介绍的方式来只有设置某个元素的class属性是一种替换操作，而有时需要是在有class值时，将新的class值进行追加操作，因此来优化className属性操作，编写一个addClass通用函数

// 获取元素节点的className属性，并添加或追加class属性值
function addClass(element,value){
	
	if(!element.className){  //判断获取的className属性是否为空
		element.className = value;
	}else{
		// 原本class属性值,newClassName为全局变量
		newClassName = element.className;
		// 追加空格
		newClassName += " ";
		// 追加新class属性值
		newClassName += value;
		// 将追加好的值赋给className属性
		element.className = newClassName;
	}
}