摘要：前言前面是纯总结，后面实现了一个用改变样式的。开始元素节点的属性文档中每个元素节点都有一个属性，属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个属性里。
前言：前面是纯总结，后面实现了一个用DOM改变样式的Demo。
－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－－－－－
1.元素节点的style属性
HTML文档中每个元素节点都有一个style属性，style属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个style属性里。
一个Demo:可以弹出弹窗，返回标签应用的CSS样式
exampl
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
第一段写点什么呢？
我来讲一段故事：从前有座山，山里一个庙...
别走啊！！！最精彩的还在后面，旁边有一座尼姑庵...
还有！！！还有！！！
你听我讲，慢慢听我讲，这个故事很精彩
你可以评论我的文章，我告诉你后续故事，真的很精彩，不骗你。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111293.html
