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

时间 2019-12-31

原文原文链接

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

1.元素节点的style属性

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

一个Demo:能够弹出弹窗，返回标签应用的CSS样式java

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>exampl</title>
        <script>
            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);  //浏览器默认的字体大小没法识别出来
            }
        </script>
    </head>
    
    <body>
        <p id="example" style="color:grey;font-family:'Arial',sans-serif;">
            An example of a paragraph
        </p>
    </body>
    </html>

2.style的弊端

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

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

Demo说明：做者首先给出了一段HTML，有两个<h1>标签，每个<h1>标签后面跟着几个<p>标签，而后用DOM改变每一个<h1>标签后面紧跟着的<p>标签的样式。在我看了这个Demo以后感受做者画蛇添足，在<p>标签上添加class或者id属性用CSS不是更简单吗？可是后面做者给出了理由：若是文档须要按期编辑更新，那么添加class属性很快就会成为负担（这个负担也不小吧。。。），anyway，看代码吧。浏览器

（1）HTML部分

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

（2）js代码部分

首先封装一个styleHeaderSiblings函数，获取全部的h1标签，而后调用nextSibling方法获取下一个节点，可是nextSibling方法返回的是全部节点而不仅是元素节点，包括h1中的text了文本，因此就须要函数getNextElement来进行判断，直到获取到下一个元素节点为止返回，而后执行改变样式的操做函数

styleHeaderSiblings函数：字体

//需求：改变h1标签紧跟着后面节点元素<p>的样式，首先要封装一个函数，获取全部的h1元素
    //headers[i].nextSibling获取的是<h1>标签后面的文本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<headers.length; i++){
            elem = getNextElement(headers[i].nextSibling);
            elem.style.fontWeight = "bold";
            elem.style.fontSize = "20px";
        }
    }

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

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

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

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)htm

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

应用以前

应用以后

5.完整源代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>exampl</title>
</head>

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


    <!--js代码-->
    <script>
        //需求：改变h1标签紧跟着后面节点元素<p>的样式，首先要封装一个函数，获取全部的h1元素
        //headers[i].nextSibling获取的是<h1>标签后面的文本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<headers.length; i++){
                elem = getNextElement(headers[i].nextSibling);
                elem.style.fontWeight = "bold";
                elem.style.fontSize = "20px";
            }
        }

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

        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);
    </script>
</body>

</html>