你的位置:首页 > Java教程

[Java教程]JavaScript学习笔记——DOM基础 2.6


一、CSS-DOM

1、清楚一个概念

HTML负责的是结构,CSS负责的是样式,JavaScript负责的是动作(行为)。

2、style属性

语法:element.style

返回:object

style相对于element是一个属性,而style本身是一个对象,它包含了诸多元素的样式。

关于这一点,可以根据后面的例子去理解。

3、获取样式

例子:element.style.fontFamily

返回:style对应属性的值,如fontFamily,返回“Microsoft yahei”

注意:style.后面的"驼峰式"命名规则

<!doctype html><html><head><meta charset="utf-8"><title>筱雨生 - 博客园</title><script>window.onload = function(){  var myPara = document.getElementById('myPara');  var myFontSize = myPara.style.fontSize;  var myFontColor = myPara.style.color;  alert(myFontSize);  alert(myFontColor);}</script></head><body><h1>筱雨生</h1><p id="myPara" style="font-size:1em; color:rgba(162,47,49,1.00);">時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"> <ul>  <li title="JavaScript">JavaScript</li>  <li title="HTML">HTML</li>  <li title="CSS">CSS</li>  <li title="我的随笔">我的随笔</li>  <li></li> </ul></div></body></html>

注意:通过style属性获取样式有很大的局限性,因为style属性只能返回内嵌样式,“内嵌”意味着style属性只有在插入HTML标签时,才可以获取到相应的值,也就是说,如果css写在外部,你将获取不到style的属性值。

4、设置样式

我们可以通过DOM的属性来获取元素节点的位置,从而设置它的样式。

<!doctype html><html><head><meta charset="utf-8"><title>筱雨生 - 博客园</title><script>window.onload = function(){  var myPara = document.getElementById('myPara');  var myFontSize = myPara.style.fontSize;  var myFontColor = myPara.style.color;  myPara.onmouseover = function(){    myPara.style.fontSize = '2em';    myPara.style.color = 'rgba(250,0,0,1)';  }  myPara.onmouseout = function(){    myPara.style.fontSize = '1em';    myPara.style.color = 'rgba(162,47,49,1.00)';  }}</script></head><body><h1>筱雨生</h1><p id="myPara" style="font-size:1em; color:rgba(162,47,49,1.00);">時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"> <ul>  <li title="JavaScript">JavaScript</li>  <li title="HTML">HTML</li>  <li title="CSS">CSS</li>  <li title="我的随笔">我的随笔</li>  <li></li> </ul></div></body></html>

5、previouseSibling与nextSibling

elementNode.previousSibling返回的是与之紧邻的上一个同级的节点,如果不存在这个节点,则返回null。

elementNode.nextSibling返回的是与之紧邻的下一个同级的节点,如果不存在这个节点,则返回null。

由于在很多浏览器中,会把空格和换行当作文本节点,所以直接应用previousSibling和nextSibling属性的时候就会比较苦逼。

二、响应事件

 CSS提供的:hover等伪class属性允许我们根据HTML元素的状态来改变样式,DOM也可以通过onmouseover等事件对HTML元素的状态变化进行响应。

由于CSS提供的伪类不是所有浏览器都可以看到效果,所以有些时候我们不得以用DOM的方法去实现一些想要的效果。

<!doctype html><html><head><meta charset="utf-8"><title>筱雨生 - 博客园</title><style>*{margin:0; padding:0;}body{  font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif,"Microsoft Yahei";  background:#fff;  padding:50px;  color:#333;}h1{  font-family:"Microsoft Yahei";  font-weight:normal;  margin-bottom:.2em;}p{font-size:.6em;color:#999;}table{border-collapse:collapse;}caption{  font-size:.9em;  padding:1em;}td{  width:400px;  text-align:center;  height:5em;  border:1px solid #999;}</style><script>function addOnLoadEvent(func){  var oldonload = window.onload; // 把现有的window.onload事件处理函数的值存储到变量oldonload  if(typeof window.onload != 'function'){ // 如果这个处理函数上还没有绑定任何函数    window.onload = func; // 将这个函数绑定到window.onload事件  }else{    window.onload = function(){ // 如果这个处理函数已经绑定了函数,就把这个函数追加到指令的末尾      oldonload();      func();    }}}function stripeTables(){  if(!document.getElementsByTagName) return false;  var tables = document.getElementsByTagName('table');  var odd,rows;  for(var i=0; i<tables.length; i++){    odd = false;    rows = tables[i].getElementsByTagName('tr');    for(var j=0; j<rows.length; j++){      if(odd == true){      rows[j].style.backgroundColor = '#ffc';      odd = false;    }else{      odd = true;    }    }  }}addOnLoadEvent(stripeTables);function highLightTr(){  if(!document.getElementsByTagName) return false;  var highLightTr = document.getElementsByTagName("tr");  for(var i=0; i<hightR.length; i++){    highLightTr[i].onmouseover = function(){      this.style.fontWeight = 'bold';    }    highLightTr[i].onmouseout = function(){      this.style.fontWeight = 'normal';    }  }}addOnLoadEvent(hightLightTr);</script></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"><table width="300" border="0" cellspacing="0" cellpadding="0"><caption>我的博客分类</caption> <tbody>  <tr>   <td>Windows</td>   <td>iOS </td>   <td>Android</td>  </tr>  <tr>   <td>JavaScript</td>   <td>HTML </td>   <td>CSS</td>  </tr>  <tr>   <td>ActionScript</td>   <td>Animate</td>   <td>Others</td>  </tr> </tbody></table></div></body></html>

上面这个实例中,stripeTables函数用来实现HTML中表格的偶数行的背景色,当然这个函数还可以衍化成其他;highLightTr函数是用来高亮显示一行的数据。

三、className属性

语法:element.className

返回:一个value值,如果myElement.className = 'title';

<!doctype html><html><head><meta charset="utf-8"><title>筱雨生 - 博客园</title><link href="style.css" rel="stylesheet" type="text/css"><script>window.onload = function(){  if(!document.getElementsByTagName) return false;  var myTitle = document.getElementsByTagName('h1');  var myElement = myTitle[0];  myElement.className = 'title';}</script></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"><table width="300" border="0" cellspacing="0" cellpadding="0"><caption>我的博客分类</caption> <tbody>  <tr>   <td>Windows</td>   <td>iOS </td>   <td>Android</td>  </tr>  <tr>   <td>JavaScript</td>   <td>HTML </td>   <td>CSS</td>  </tr>  <tr>   <td>ActionScript</td>   <td>Animate</td>   <td>Others</td>  </tr> </tbody></table></div></body></html>

@charset "utf-8";/* CSS Document */*{margin:0; padding:0;}body{  font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif,"Microsoft Yahei";  background:#fff;  padding:50px;  color:#333;}h1{  font-family:"Microsoft Yahei";  font-weight:normal;  margin-bottom:.2em;}p{font-size:.6em;color:#999;}table{border-collapse:collapse;}caption{  font-size:.9em;  padding:1em;}td{  width:400px;  text-align:center;  height:5em;  border:1px solid #999;}.title{  font-family:"Microsoft Yahei";  font-weight:normal;  margin-bottom:.2em;  color:#AA0002;}

View Code

上面这个实例中,通过className属性给h1元素节点设定了新的CSS,新的CSS并非来自元素节点的属性,而是来自于外部CSS。

四、题外话

嗨,哈利波特,你的魔法秘籍看到第几章了,能借给我瞅瞅不?