成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

liukai90 / 1561人閱讀

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

前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對(duì)函數(shù)進(jìn)行抽象。

－－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－－－－－

1.className屬性

前兩篇一直是用DOM直接設(shè)置或者修改CSS樣式，這屬于讓js的“行為層”干CSS“表示層”活，試想，一旦你要再次修改由DOM腳本設(shè)置的樣式，就需要在js代碼中各種一通找，很麻煩并且如果代碼較多的時(shí)候你或許會(huì)瘋掉。
一個(gè)思考：為什么不用js直接更改元素節(jié)點(diǎn)的class類名選擇器呢？
甚至你都不用在HTML中事先布置好這個(gè)class類名選擇器，因?yàn)閏lassName屬性是一個(gè)可讀／可寫的屬性，如果元素節(jié)點(diǎn)事先沒有定義一個(gè)class類名選擇器，直接寫ele.calssName ＝ "你設(shè)置的類選擇器名"會(huì)直接為元素節(jié)點(diǎn)添加class類名選擇器，從而實(shí)現(xiàn)更改元素節(jié)點(diǎn)的樣式。

所以就會(huì)出現(xiàn)這種方案：只需要在CSS中添加一個(gè)特定的類名選擇器定義樣式，用js代碼直接操作這個(gè)class選擇器賦值給HTML中的某個(gè)節(jié)點(diǎn)。當(dāng)想改變這個(gè)節(jié)點(diǎn)的樣式時(shí)，不用在js代碼中找尋，只需要在CSS中直接改成你想要的樣式就ok了。

2.一個(gè)Demo

多說無益，還是上代碼來得實(shí)在

還記得《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（一）中那個(gè)無聊的“根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置樣式”的Demo吧？現(xiàn)在可以用className屬性直接更改樣式了。

（1）HTML部分-沒有變化 
Hold the page


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


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


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


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


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


你可以評(píng)論我的文章，我告訴你后續(xù)故事，真的很精彩，不騙你。
（2）CSS部分－添加一個(gè)class選擇器 
    .intro{
        font-weight:bold;
        dont-size:20px;
    }
（3）js代碼部分－對(duì)styleHeaderSiblings函數(shù)進(jìn)行一些改造

此時(shí)不直接用elem.style.fontWeight更改樣式，而是在遍歷到每一個(gè)h1緊鄰著的p標(biāo)簽之后，直接為其添加class屬性選擇器，并且把這個(gè)屬性指定為第（二）步中添加的CSS樣式。

function styleHeaderSiblings(){
    if(!document.getElementsByTagName){
        return false;
    }
    var headers = document.getElementsByTagName("h1");
    var elem;
    for(var i = 0; i

其他的函數(shù)都沒有做改變，現(xiàn)在如果想再次更改樣式，只需要在CSS中更改樣式就OK了。

3.對(duì)函數(shù)進(jìn)行抽象

再來看看styleHeaderSiblings函數(shù)，這個(gè)函數(shù)僅僅適用于h1元素，className屬性值"intro"都是硬編碼在函數(shù)中，所以沒有通用性，所以需要對(duì)這個(gè)函數(shù)進(jìn)行一些抽象，從而讓它的用途更廣泛。

（1）首先增加兩個(gè)參數(shù)

function styleElementSiblings(tag,theclass)



第一個(gè)參數(shù)tag代表你想要替換的元素節(jié)點(diǎn)，本例是根據(jù)位置更換樣式，特殊情況所以是h1，而不是緊跟著的p標(biāo)簽。


第二個(gè)參數(shù)theclass代表你想為元素節(jié)點(diǎn)更換的class類名選擇器，本例是"intro"


抽象前：


       function styleHeaderSiblings(){
            if(!document.getElementsByTagName){
                return false;
            }
            var headers = document.getElementsByTagName("h1");
            var elem;
            for(var i = 0; i
（2）抽象出一個(gè)addClass函數(shù)

由于className屬性直接就更改了class類名選擇器，所以如果元素事先設(shè)置了class類名選擇器，原有的樣式會(huì)失效，所以需要再次抽象一個(gè)添加className的函數(shù)，取名叫addClass，有兩個(gè)參數(shù)，一個(gè)是目標(biāo)元素element（本例中這次是p標(biāo)簽），一個(gè)是值value（本例中是"intro"）


如果元素沒有class屬性選擇器，就把value值直接賦給它
如果有，就加個(gè)空格，再給它追加一個(gè)class類選擇器


抽象后


    function addClass(element,value){
        if(!element.className){
            element.calssName = value;
        }else{
            newClassName = element.className;
            newClassName = " ";
            newClassName += value;
            element.className = newClassName;
        }
    }

   function styleHeaderSiblings(tag,theclass){
        if(!document.getElementsByTagName){
            return false;
        }
        var elems = document.getElementsByTagName("tag");
        var elem;
        for(var i = 0; i
4.完整源碼

老規(guī)矩了，上源碼～～～歡迎留言拍磚評(píng)論交流～～～～


    
    
    
    
        
        exampl
        
    
    
    
        
Hold the page

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79675.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

    摘要：前言前面是純總結(jié)，后面實(shí)現(xiàn)了一個(gè)用改變樣式的。開始元素節(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。－－－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素節(jié)點(diǎn)的style屬性 HTML文檔中...

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

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

    摘要：前言前面是純總結(jié)，后面實(shí)現(xiàn)了一個(gè)用改變樣式的。開始元素節(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。－－－－－－－－－－－－－－－－－－－開始－－－－－－－－－－－－－－－－－－－－－－－－－ 1.元素節(jié)點(diǎn)的style屬性 HTML文檔中...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<