《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>