成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（一）

Bryan / 554人閱讀

摘要：前言前面是純總結(jié)，后面實(shí)現(xiàn)了一個(gè)用改變樣式的。開(kāi)始元素節(jié)點(diǎn)的屬性文檔中每個(gè)元素節(jié)點(diǎn)都有一個(gè)屬性，屬性包含著元素的樣式，查詢這個(gè)這個(gè)屬性將會(huì)返回一個(gè)對(duì)象，節(jié)點(diǎn)對(duì)應(yīng)的樣式都存放在這個(gè)屬性里。

前言：前面是純總結(jié)，后面實(shí)現(xiàn)了一個(gè)用DOM改變樣式的Demo。
－－－－－－－－－－－－－－－－－－－開(kāi)始－－－－－－－－－－－－－－－－－－－－－－－－－

1.元素節(jié)點(diǎn)的style屬性

HTML文檔中每個(gè)元素節(jié)點(diǎn)都有一個(gè)style屬性，style屬性包含著元素的樣式，查詢這個(gè)這個(gè)屬性將會(huì)返回一個(gè)對(duì)象，節(jié)點(diǎn)對(duì)應(yīng)的樣式都存放在這個(gè)style屬性里。

一個(gè)Demo:可以彈出彈窗，返回標(biāo)簽應(yīng)用的CSS樣式

    
    
    
        
        exampl
        
    
    
    
        

            An example of a paragraph
2.style的弊端

style屬性只能返回內(nèi)嵌樣式，只有把CSS style樣式插入到標(biāo)記里，才可以用DOM style屬性去查詢那些信息。

3.一個(gè)Demo：根據(jù)元素在節(jié)點(diǎn)樹(shù)里的位置來(lái)設(shè)置樣式

Demo說(shuō)明：作者首先給出了一段HTML，有兩個(gè)

標(biāo)簽，每一個(gè)

標(biāo)簽后面跟著幾個(gè)

標(biāo)簽，然后用DOM改變每個(gè)

標(biāo)簽后面緊跟著的

標(biāo)簽的樣式。在我看了這個(gè)Demo之后感覺(jué)作者多此一舉，在

標(biāo)簽上添加class或者id屬性用CSS不是更簡(jiǎn)單嗎？但是后面作者給出了理由：如果文檔需要定期編輯更新，那么添加class屬性很快就會(huì)成為負(fù)擔(dān)（這個(gè)負(fù)擔(dān)也不小吧。。。），anyway，看代碼吧。

（1）HTML部分 
    
Hold the page

    
第一段寫(xiě)點(diǎn)什么呢？

    
我來(lái)講一段故事：從前有座山，山里一個(gè)廟...

    
別走?。。。∽罹实倪€在后面，旁邊有一座尼姑庵...

    
還有！?。∵€有?。。?/h1>
    
你聽(tīng)我講，慢慢聽(tīng)我講，這個(gè)故事很精彩

    
你可以評(píng)論我的文章，我告訴你后續(xù)故事，真的很精彩，不騙你。
（2）js代碼部分

首先封裝一個(gè)styleHeaderSiblings函數(shù)，獲取所有的h1標(biāo)簽，然后調(diào)用nextSibling方法獲取下一個(gè)節(jié)點(diǎn)，但是nextSibling方法返回的是所有節(jié)點(diǎn)而不只是元素節(jié)點(diǎn)，包括h1中的text了文本，所以就需要函數(shù)getNextElement來(lái)進(jìn)行判斷，直到獲取到下一個(gè)元素節(jié)點(diǎn)為止返回，然后執(zhí)行改變樣式的操作

styleHeaderSiblings函數(shù)：

    //需求：改變h1標(biāo)簽緊跟著后面節(jié)點(diǎn)元素
的樣式，首先要封裝一個(gè)函數(shù)，獲取所有的h1元素
    //headers[i].nextSibling獲取的是
標(biāo)簽后面的文本text，用getNextElement函數(shù)進(jìn)行判斷
    //如果headers[i].nextSibling是類(lèi)型為1的節(jié)點(diǎn)元素，就返回并且改變樣式
    //如果不是就接著執(zhí)行g(shù)etNextElement函數(shù)（遞歸函數(shù)思想）
    function styleHeaderSiblings(){
        if(!document.getElementsByTagName){
            return false;
        }
        var headers = document.getElementsByTagName("h1");
        var elem;
        for(var i = 0; i

getNextElement函數(shù)：唯一能讓人興奮的地方就是這里用了遞歸吧～～～


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


在頁(yè)面加載完成后調(diào)用styleHeaderSiblings函數(shù)，所以要封裝一個(gè)addLoadEvent函數(shù)


    function addLoadEvent(func){
        //把現(xiàn)有的window.onload存入變量oldonload
        var oldonload = window.onload;
        if(typeof window.onload != "function"){
            window.onload = func;
        }else{
            window.onload = function(){
                oldonload();
                func();
            }
        }
    }


最后調(diào)用頁(yè)面加載完成時(shí)執(zhí)行addLoadEvent(styleHeaderSiblings)

4.效果對(duì)比，略無(wú)聊～～～

應(yīng)用之前


應(yīng)用之后

5.完整源代碼





    
    exampl



    
Hold the page

    
第一段寫(xiě)點(diǎn)什么呢？

    
我來(lái)講一段故事：從前有座山，山里一個(gè)廟...

    
別走?。。?！最精彩的還在后面，旁邊有一座尼姑庵...

    
還有！??！還有?。?！

    
你聽(tīng)我講，慢慢聽(tīng)我講，這個(gè)故事很精彩

    
你可以評(píng)論我的文章，我告訴你后續(xù)故事，真的很精彩，不騙你。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79682.html

相關(guān)文章

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。一個(gè)多說(shuō)無(wú)益，還是上代碼來(lái)得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個(gè)無(wú)聊的根據(jù)元素在節(jié)點(diǎn)樹(shù)里的位置來(lái)設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    王巖威 評(píng)論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。一個(gè)多說(shuō)無(wú)益，還是上代碼來(lái)得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個(gè)無(wú)聊的根據(jù)元素在節(jié)點(diǎn)樹(shù)里的位置來(lái)設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    liukai90 評(píng)論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（一）

    摘要：前言前面是純總結(jié)，后面實(shí)現(xiàn)了一個(gè)用改變樣式的。開(kāi)始元素節(jié)點(diǎn)的屬性文檔中每個(gè)元素節(jié)點(diǎn)都有一個(gè)屬性，屬性包含著元素的樣式，查詢這個(gè)這個(gè)屬性將會(huì)返回一個(gè)對(duì)象，節(jié)點(diǎn)對(duì)應(yīng)的樣式都存放在這個(gè)屬性里。 前言：前面是純總結(jié)，后面實(shí)現(xiàn)了一個(gè)用DOM改變樣式的Demo。－－－－－－－－－－－－－－－－－－－開(kāi)始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素節(jié)點(diǎn)的style屬性 HTML文檔中...

    sourcenode 評(píng)論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（二）

    摘要：部分這是一個(gè)表格月日北京路號(hào)人民廣場(chǎng)月日南京路號(hào)人民博物館月日上海路號(hào)人民藝術(shù)中心部分要美觀，還是稍微寫(xiě)點(diǎn)樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對(duì)做樣式修改。 前言：接上篇，本篇有兩個(gè)內(nèi)容：一個(gè)是Demo：當(dāng)鼠標(biāo)hover到表格的一行上時(shí)這行表格字體加粗。。。好了，廢話少說(shuō)，開(kāi)始?。?！ －－－－－－－－－－－－－－－－－－嚴(yán)肅的分割線－－－－－－－－－－－－－－－－－－ 1....

    amc 評(píng)論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（二）

    摘要：部分這是一個(gè)表格月日北京路號(hào)人民廣場(chǎng)月日南京路號(hào)人民博物館月日上海路號(hào)人民藝術(shù)中心部分要美觀，還是稍微寫(xiě)點(diǎn)樣式吧代碼部分思路就是獲取到所有的，然后遍歷，并對(duì)做樣式修改。 前言：接上篇，本篇有兩個(gè)內(nèi)容：一個(gè)是Demo：當(dāng)鼠標(biāo)hover到表格的一行上時(shí)這行表格字體加粗。。。好了，廢話少說(shuō)，開(kāi)始！?。?－－－－－－－－－－－－－－－－－－嚴(yán)肅的分割線－－－－－－－－－－－－－－－－－－ 1....

    yangrd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<