CSS-DOM
2018-07-21 本文已影响0人
沒空
1.利用DOM找出文档中的所有h1元素，在找出紧跟在每个h1元素后面的那个元素，并把样式添加给它。
story.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Man bites dog</title>
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/styleHeaderSiblings.js"></script>
</head>
<body>
<h1>Hold the front page</h1>
<p>This first paragraph leads you in.</p>
<p>Now you get the nitty-gritty of the story.</p>
<p>The most important information is delivered first.</p>
<h1>Extra! Extra!</h1>
<p>Further developments are unfolding.</p>
<p>You can read all about it here.</p>
</body>
addLoadEvent.js
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=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<headers.length;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
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" href="format.css"/>
<title>Cities</title>
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/stripeTables.js"></script>
<script src="scripts/displayAbbreviations.js"></script>
</head>
<body>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland,<abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle,<abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento,<abbr title="California">CA</abbr></td>
</tr>
</tbody>
</table>
</body>
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<tables.length;i++){ //遍历
odd=false; //对每个table元素，创建变量odd
并初始化false；
rows=tables[i].getElementsByTagName("tr"); //找tr元素
for(var j=0;j<rows.length;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.length;i++){
rows[i].onmouseover=function(){
this.style.fontWeight="bold";
}
rows[i].onmouseout=function(){
this.style.fontWeight="normal";
}
}
}
addLoadEvent(highlightRows);
再在ltinerary.html添加<script>标签：
<script src="scripts/highlightRows.js"></script>
通过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<elems.length;i++){
elem=getNextElement(elems[i].nextSibling);
addClass(elem,theclass);
}
}
addLoadEvent(function(){
styleElementSiblings("h1","intro");
});
