资讯专栏INFORMATION COLUMN

《DOM编程艺术》中CSS—DOM的总结(一)

Bryan / 482人阅读

摘要:前言前面是纯总结,后面实现了一个用改变样式的。开始元素节点的属性文档中每个元素节点都有一个属性,属性包含着元素的样式,查询这个这个属性将会返回一个对象,节点对应的样式都存放在这个属性里。

前言:前面是纯总结,后面实现了一个用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/79682.html

相关文章

  • DOM编程艺术CSSDOM总结(三)

    摘要:前言这是系列最后一篇,本文主要总结了的用法,以及最后对函数进行抽象。一个多说无益,还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言:这是CSS-DOM系列最后一篇,本文主要总结了className的用法,以及最后对函数进行抽象。 ------------------我是分割线----------------...

    王岩威 评论0 收藏0
  • DOM编程艺术CSSDOM总结(三)

    摘要:前言这是系列最后一篇,本文主要总结了的用法,以及最后对函数进行抽象。一个多说无益,还是上代码来得实在还记得编程艺术中的总结一中那个无聊的根据元素在节点树里的位置来设置样式的吧现在可以用属性直接更改样式了。 前言:这是CSS-DOM系列最后一篇,本文主要总结了className的用法,以及最后对函数进行抽象。 ------------------我是分割线----------------...

    liukai90 评论0 收藏0
  • DOM编程艺术CSSDOM总结

    摘要:前言前面是纯总结,后面实现了一个用改变样式的。开始元素节点的属性文档中每个元素节点都有一个属性,属性包含着元素的样式,查询这个这个属性将会返回一个对象,节点对应的样式都存放在这个属性里。 前言:前面是纯总结,后面实现了一个用DOM改变样式的Demo。-------------------开始------------------------- 1.元素节点的style属性 HTML文档中...

    sourcenode 评论0 收藏0
  • DOM编程艺术CSSDOM总结(二)

    摘要:部分这是一个表格月日北京路号人民广场月日南京路号人民博物馆月日上海路号人民艺术中心部分要美观,还是稍微写点样式吧代码部分思路就是获取到所有的,然后遍历,并对做样式修改。 前言:接上篇,本篇有两个内容:一个是Demo:当鼠标hover到表格的一行上时这行表格字体加粗。。。好了,废话少说,开始!!! ------------------严肃的分割线------------------ 1....

    yangrd 评论0 收藏0
  • DOM编程艺术CSSDOM总结(二)

    摘要:部分这是一个表格月日北京路号人民广场月日南京路号人民博物馆月日上海路号人民艺术中心部分要美观,还是稍微写点样式吧代码部分思路就是获取到所有的,然后遍历,并对做样式修改。 前言:接上篇,本篇有两个内容:一个是Demo:当鼠标hover到表格的一行上时这行表格字体加粗。。。好了,废话少说,开始!!! ------------------严肃的分割线------------------ 1....

    amc 评论0 收藏0

发表评论

0条评论

Bryan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<