css dom名称,CSS-DOM

1.利用DOM找出文档中的所有h1元素，在找出紧跟在每个h1元素后面的那个元素，并把样式添加给它。

story.html

Man bites dog

Hold the front page

This first paragraph leads you in.

Now you get the nitty-gritty of the story.

The most important information is delivered first.

Extra! Extra!

Further developments are unfolding.

You can read all about it here.

addLoadEvent.js

function addLoadEvent(func){

var oldοnlοad=window.onload;

if(typeof window.onload!='function'){

window.οnlοad=func;

}else{

window.οnlοad=function(){

oldonload();

func();

}

}

}

styleHeaderSiblings.js

function styleHeaderSiblings(){

if(!document.getElementsByTagName)return false; //检查兼容性

var headers=document.getElementsByTagName("h1"); //找到所有的h1元素

var elem;

for(var i=0;i

elem=getNextElement(headers[i].nextSibling); //把h1的下一个节点作为参数传给getNextElement函数

elem.style.fontWeight="bold"; //设置样式

elem.style.fontSize="1.2em";

}

}

function getNextElement(node){ //找下一个元素节点的函数

if(node.nodeType==1){

return node;

}

if(node.nextSibling){

return getNextElement(node.nextSibling);

}

return null;

}

addLoadEvent(styleHeaderSiblings);

image.png

2.表格交替改变他们的背景色，形成斑马线效果

itinerary.html

Cities

WhenWhere

June 9thPortland, ORJune 10thSeattle, WAJune 12thSacramento, CA

format.css

body{

font-family:"Helvetica","Arial",sans-serif;

background-color:#fff;

color:#000;

}

table{

margin:auto;

border:1px solid #699;

}

caption{

margin:auto;

padding:.2em;

font-size:1.2em;

font-weight:bold;

}

th{

font-weight:normal;

font-style:italic;

text-align:left;

border:1px dotted #699;

background-color:#9cc;

color:#000;

}

th,td{

width:10em;

padding:.5em;

}

stripeTables.js

function stripTables(){

if(!document.getElementsByTagName)return false; //检查兼容性

var tables=document.getElementsByTagName("table"); //找table元素

var odd,rows;

for(var i=0;i

odd=false; //对每个table元素，创建变量odd

并初始化false；

rows=tables[i].getElementsByTagName("tr"); //找tr元素

for(var j=0;j

if(odd==true){ //如果odd是true，设置样式并修改为false，反之修改为true

rows[j].style.backgroundColor="#ffc";

odd=false;

}else{

odd=true;

}

}

}

}

addLoadEvent(stripTables);

以及addLoadEvent.js,充实文档内容的displayAbbreviations.js

image.png

鼠标指针悬停在某个表格上方时，把该行的文本加黑加粗

highlightRows.js

function highlightRows(){

if(!document.getElementsByTagName)return false;

var rows=document.getElementsByTagName("tr");

for(var i=0;i

rows[i].οnmοuseοver=function(){

this.style.fontWeight="bold";

}

rows[i].οnmοuseοut=function(){

this.style.fontWeight="normal";

}

}

}

addLoadEvent(highlightRows);

再在ltinerary.html添加标签：

通过css而不是DOM去设置样式，确保网页的表示层和行为层分离的更加彻底

更新stripeTables.js

rows[j].style.backgroundColor="#ffc";

改为

addClass(rows[j],"odd");

需要给一个元素追加新的class时，调用addClass函数

addClass.js

function addClass(element,value){

if(!element.className){ //检查className值是否为null

element.className=value; //为null，则赋新值

}else{ //否则，旧值加新值(追加class属性)

newClassName=element.className;

newClassName+=" ";

newClassName+=value;

element.className=newClassName;

}

}

结果不变，但CSS与DOM分离的更加彻底。

对函数进行抽象，有利于变得更加通用

eg：增加两个参数tag和theclass

function styleElementSiblings(tag,theclass){

if(!document.getElementsByTagName)return false;

var elems=document.getElementsByTagName(tag);

var elem;

for(var i=0;i

elem=getNextElement(elems[i].nextSibling);

addClass(elem,theclass);

}

}

addLoadEvent(function(){

styleElementSiblings("h1","intro");

});