JavaScript第九章：className属性

   与其使用DOM直接改变某个元素的格式，不如通过JavaScript代码去更新这个元素的class属性。

   我们回顾下上一节中styleHeaderSiblings是如何添加样式的：

    function styleHeaderSiblings(){
       if(!document.getElementsByTagName) return false; 
       var headers=document.getElementsByTagName("h1");
       var elem;
       for(var i=0;i<headers.length;i++){
          elem=getNextElement(headers[i].nextSibling);
          elem.style.fontWeigh="bold";
          elem.style.fontSize="1.2em";
       }
  }

   如果我们有一个外部CSS样式表：

.intro{
	font-weight:bold;
	font-size:1.2em;
}

  最简单的方式：我们可以通过更新className属性来完成。

 element.setAttribute("class","intro");

    function styleHeaderSiblings(){
       if(!document.getElementsByTagName) return false; 
       var headers=document.getElementsByTagName("h1");
       var elem;
       for(var i=0;i<headers.length;i++){
          elem=getNextElement(headers[i].nextSibling);
          elem.className("intro");
       }
  }

这个技巧有个不足之处：通过className属性设置某个元素的class属性将替换该元素原有的class属性。

如果想要把新的class设置值追加到className属性上去，如下所示：

  elem.className+="intro";

不过，实际上你只希望在原来确定有一个class的情况下才这么做，如果没有任何class，直接对className属性赋值就可以了。

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

    function styleHeaderSiblings(){
       if(!document.getElementsByTagName) return false; 
       var headers=document.getElementsByTagName("h1");
       var elem;
       for(var i=0;i<headers.length;i++){
          elem=getNextElement(headers[i].nextSibling);
          addClass(elem，"intro");
       }
  }

 

2.对函数进行抽象

     仔细看看styleHeaderSiblings函数，就会发现它仅适用于h1元素，而且className属性值intro也是硬编码在函数代码里。

     我们把这些具体的值转换为这个函数的参数，就可以让它成为一个更通用的函数。

    function styleElementsSiblings(tag,theClass){
       if(!document.getElementsByTagName) return false; 
       var headers=document.getElementsByTagName(tag);
       var elem;
       for(var i=0;i<headers.length;i++){
          elem=getNextElement(headers[i].nextSibling);
          elem.className(theClass);
       }
  }