媒介：这是CSS－DOM系列末了一篇，本文重要总结了className的用法，以及末了对函数举行笼统。
－－－－－－－－－－－－－－－－－－我是分割线－－－－－－－－－－－－－－－－－－－－
1.className属性
前两篇一直是用DOM直接设置也许修正CSS款式，这属于让js的“行动层”干CSS“示意层”活，试想，一旦你要再次修正由DOM剧本设置的款式，就须要在js代码中种种一通找，很贫苦而且假如代码较多的时刻你也许会疯掉。
一个思索：为何不必js直接变动元素节点的class类名选择器呢？
以至你都不必在HTML中事前安排好这个class类名选择器，因为className属性是一个可读／可写的属性，假如元素节点事前没有定义一个class类名选择器，直接写ele.calssName ＝ “你设置的类选择器名”会直接为元素节点增添class类名选择器，从而完成变动元素节点的款式。
所以就会涌现这类计划：只须要在CSS中增添一个特定的类名选择器定义款式，用js代码直接操纵这个class选择器赋值给HTML中的某个节点。当想转变这个节点的款式时，不必在js代码中找寻，只须要在CSS中直接改成你想要的款式就ok了。
2.一个Demo
多说无益，照样上代码来得着实
还记得《DOM编程艺术》中CSS—DOM的总结（一）中谁人无聊的“依据元素在节点树里的位置来设置款式”的Demo吧？如今能够用className属性直接变动款式了。
（1）HTML部份-没有变化
<h1>Hold the page</h1>
<p>第一段写点什么呢？</p>
<p>我来说一段故事：夙昔有座山，山里一个庙...</p>
<p>别走啊！！！最出色的还在背面，旁边有一座尼姑庵...</p>
<h1>另有！！！另有！！！</h1>
<p>你听我讲，逐步听我讲，这个故事很出色</p>
<p>你能够批评我的文章，我通知你后续故事，真的很出色，不骗你。</p>（2）CSS部份－增添一个class选择器
.intro{
font-weight:bold;
dont-size:20px;
}
（3）js代码部份－对styleHeaderSiblings函数举行一些革新
此时不直接用elem.style.fontWeight变动款式，而是在遍历到每个h1紧邻着的p标签以后，直接为其增添class属性选择器，而且把这个属性指定为第（二）步中增添的CSS款式。
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.calssName = "intro";
}
}
其他的函数都没有做转变，如今假如想再次变动款式，只须要在CSS中变动款式就OK了。
3.对函数举行笼统
再来看看styleHeaderSiblings函数，这个函数仅仅适用于h1元素，className属性值”intro”都是硬编码在函数中，所以没有通用性，所以须要对这个函数举行一些笼统，从而让它的用处更普遍。
（1）起首增添两个参数
function styleElementSiblings(tag,theclass)
第一个参数tag代表你想要替代的元素节点，本例是依据位置替换款式，特殊情况所以是h1，而不是紧跟着的p标签。
第二个参数theclass代表你想为元素节点替换的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";
}
}
（2）笼统出一个addClass函数
因为className属性直接就变动了class类名选择器，所以假如元素事前设置了class类名选择器，原有的款式会失效，所以须要再次笼统一个增添className的函数，取名叫addClass，有两个参数，一个是目的元素element（本例中此次是p标签），一个是值value（本例中是”intro”）
假如元素没有class属性选择器，就把value值直接赋给它
假如有，就加个空格，再给它追加一个class类选择器
笼统后
function addClass(element,value){
if(!element.className){
element.calssName = value;
}else{
newClassName = element.className;
newClassName = " ";
newClassName += value;
element.className = newClassName;
}
}
function styleHeaderSiblings(tag,theclass){
if(!document.getElementsByTagName){
return false;
}
var elems = document.getElementsByTagName("tag");
var elem;
for(var i = 0; i<elems.length; i++){
elem = getNextElement(elems[i].nextSibling);
addClass(elem,theclass);
}
}
4.完全源码
老例子了，上源码～～～迎接留言拍砖批评交换～～～～
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>exampl</title>
<style>
.intro{
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Hold the page</h1>
<p>第一段写点什么呢？</p>
<p>我来说一段故事：夙昔有座山，山里一个庙...</p>
<p>别走啊！！！最出色的还在背面，旁边有一座尼姑庵...</p>
<h1>另有！！！另有！！！</h1>
<p>你听我讲，逐步听我讲，这个故事很出色</p>
<p>你能够批评我的文章，我通知你后续故事，真的很出色，不骗你。</p>
<!--js代码-->
<script>
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,theclass);
}
}
function addClass(element,value){
if(!element.className){
element.calssName = value;
}else{
newClassName = element.className;
newClassName = " ";
newClassName += value;
element.className = newClassName;
}
}
function getNextElement(node){
if(node.nodeType == 1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}
function addLoadEvent(func){
//把现有的window.onload存入变量oldonload
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(styleHeaderSiblings);
</script>
</body>
</html>
