首页 > 代码库 > 第九章 CSS-DOM

第九章 CSS-DOM

2024-10-22 09:23:01   209人阅读

另一个网友整理了很多书中的代码：http://www.cnblogs.com/jingangel/archive/2013/01/03/2843505.html

1. 三位一体的网页

　　浏览器看到的网页有三部分构成：结构层（HTML）、表示层(CSS)、行为层(javascript).

2. style属性

　　每个元素有各种各样的属性，比如位置属性：parentNode,childNOdes, previousSibling;元素本身信息属性:nodeType, nodeName;所有元素都有style属性，包含元素的样式。

var obj = document.getElementById("obj");alert(obj.nodeName);//如果是p标签，则为palert(typeof obj.type);//object,是一个对象alert(typeof obj.nodeName);//string

举例：

//局限style只能获取内部样式，不能获取样式文件中的样式element.style.color;//颜色element.style.fontFamily;//返回字体，中间爱你没有下划线element.style.fontSize;//字体大小

3. 获取样式

#第一种，根据标签名称p{  font-size: 1em;  }#第二种，根据样式名称.findprint{    font-size: 1em;}#第三种，根据元素的id#intro{    font-size: 1em;}

4. 奇偶选择

tr:nth-child(odd){background-color:#ffc;}tr:nth-child(even){background-color:#fff;}

5. 响应事件,CSS可以实现，dom可以利用onmouseover事件来实现

#鼠标移过a:hover{   color:#c60;}tr:hover{    color:#c60;    font-weight: bold;}
function highlightPage(){  if(!document.getElementsByTagName) return false;    if(!document.getElementById) return false;    var headers = document.getElementsByTagName(‘header‘);    if(headers.length == 0) return false;    var navs = headers[0].getElementsByTagName(‘nav‘);    if(navs.length == 0) return false;    var links = navs[0].getElementsByTagName(‘a‘);    for(var i=0; i<links.length; i++){      linkurl = links[i].getAttribute(‘href‘);        if(window.location.href.indexOf(linkurl)!=-1){          links[i].className = "now";            var linktext = links[i].lastChild.nodeValue.toLowerCase();            document.body.setAttribute("id",linktext);        }    }}addLoadEvent(highlightPage);

6. className属性

obj.classNme = "intro";elem.className += " intro";//追加

 

第九章 CSS-DOM


联系
我们