与其使用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);
}
}