《DOM编程艺术》中CSS—DOM的总结（一）

2016-07-06 09:00:00

前言：前面是纯总结，后面实现了一个用DOM改变样式的Demo。
－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－－－－－

1.元素节点的style属性

HTML文档中每个元素节点都有一个style属性，style属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个style属性里。

一个Demo:可以弹出弹窗，返回标签应用的CSS样式

    exampl        window.onload = function(){            var para = document.getElementById("example");            alert("The font family is "+ para.style.fontFamily);            alert("The color is "+ para.style.color);            alert("The font fontsize is "+ para.style.fontSize);  //浏览器默认的字体大小无法识别出来        }        An example of a paragraph

2.style的弊端

style属性只能返回内嵌样式，只有把CSS style样式插入到标记里，才可以用DOM style属性去查询那些信息。

3.一个Demo：根据元素在节点树里的位置来设置样式

Demo说明：作者首先给出了一段HTML，有两个# 标签，每一个# 标签后面跟着几个标签，然后用DOM改变每个# 标签后面紧跟着的标签的样式。在我看了这个Demo之后感觉作者多此一举，在标签上添加class或者id属性用CSS不是更简单吗？但是后面作者给出了理由：如果文档需要定期编辑更新，那么添加class属性很快就会成为负担（这个负担也不小吧。。。），anyway，看代码吧。

（1）HTML部分

# Hold the page第一段写点什么呢？我来讲一段故事：从前有座山，山里一个庙...别走啊！！！最精彩的还在后面，旁边有一座尼姑庵...# 还有！！！还有！！！你听我讲，慢慢听我讲，这个故事很精彩你可以评论我的文章，我告诉你后续故事，真的很精彩，不骗你。

（2）js代码部分

首先封装一个styleHeaderSiblings函数，获取所有的h1标签，然后调用nextSibling方法获取下一个节点，但是nextSibling方法返回的是所有节点而不只是元素节点，包括h1中的text了文本，所以就需要函数getNextElement来进行判断，直到获取到下一个元素节点为止返回，然后执行改变样式的操作

styleHeaderSiblings函数：

//需求：改变h1标签紧跟着后面节点元素的样式，首先要封装一个函数，获取所有的h1元素//headers[i].nextSibling获取的是# 标签后面的文本text，用getNextElement函数进行判断//如果headers[i].nextSibling是类型为1的节点元素，就返回并且改变样式//如果不是就接着执行getNextElement函数（递归函数思想）function styleHeaderSiblings(){    if(!document.getElementsByTagName){        return false;    }    var headers = document.getElementsByTagName("h1");    var elem;    for(var i = 0; i

getNextElement函数：唯一能让人兴奋的地方就是这里用了递归吧～～～

function getNextElement(node){    if(node.nodeType == 1){        return node;    }    if(node.nextSibling){        return getNextElement(node.nextSibling);    }    return null;}

在页面加载完成后调用styleHeaderSiblings函数，所以要封装一个addLoadEvent函数

function addLoadEvent(func){    //把现有的window.onload存入变量oldonload    var oldonload = window.onload;    if(typeof window.onload != 'function'){        window.onload = func;    }else{        window.onload = function(){            oldonload();            func();        }    }}

最后调用页面加载完成时执行addLoadEvent(styleHeaderSiblings)

4.效果对比，略无聊～～～

应用之前

应用之后

5.完整源代码

exampl# Hold the page第一段写点什么呢？我来讲一段故事：从前有座山，山里一个庙...别走啊！！！最精彩的还在后面，旁边有一座尼姑庵...# 还有！！！还有！！！你听我讲，慢慢听我讲，这个故事很精彩你可以评论我的文章，我告诉你后续故事，真的很精彩，不骗你。    //需求：改变h1标签紧跟着后面节点元素的样式，首先要封装一个函数，获取所有的h1元素    //headers[i].nextSibling获取的是# 标签后面的文本text，用getNextElement函数进行判断    //如果headers[i].nextSibling是类型为1的节点元素，就返回并且改变样式    //如果不是就接着执行getNextElement函数（递归函数思想）    function styleHeaderSiblings(){        if(!document.getElementsByTagName){            return false;        }        var headers = document.getElementsByTagName("h1");        var elem;        for(var i = 0; i

关键字：JavaScript, css

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！