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

資訊專欄INFORMATION COLUMN

JS實現(xiàn)博客前端頁面（二）—— 封裝CSS

cyqian / 3106人閱讀

摘要：在實現(xiàn)博客前端頁面一中已經(jīng)實現(xiàn)了的一些基礎(chǔ)封裝，在本文中將繼續(xù)封裝封裝方法如果在頁面中給某些元素設(shè)置了屬性，則需要使用屬性名來獲取這些節(jié)點，可以封裝方法，具體代碼如下獲取節(jié)點數(shù)組首先所有的節(jié)點判斷節(jié)點的是否與傳入的一致將一致的節(jié)點保存到數(shù)組

在JS實現(xiàn)博客前端頁面（一）中已經(jīng)實現(xiàn)了CSS的一些基礎(chǔ)封裝，在本文中將繼續(xù)封裝CSS

封裝getClass()方法

如果在頁面中給某些元素設(shè)置了class屬性，則需要使用class屬性名來獲取這些節(jié)點，可以封裝getClass()方法，具體代碼如下：

//獲取class節(jié)點數(shù)組
Base.prototype.getClass=function(className){
    //首先所有的節(jié)點
    var arr = document.getElementsByTagName("*");
    for (var i=0;i

但有時候，我們不需要把所有獲取到的class都設(shè)置CSS，只需要設(shè)置其中的某一個，這時我們可以進行篩選，封裝getElement()方法，代碼如下：


//獲取某一個節(jié)點,傳入節(jié)點的number值
Base.prototype.getElement=function(num){
    //獲取傳入num對應(yīng)的element值
    var element = this.elements[num];
    //清空this.elements數(shù)組
    this.elements = [];
    //將獲取的element值再加入到數(shù)組中,當(dāng)前數(shù)組中只有一個值
    this.elements[0]=element;
    //返回Base對象
    return this;
}
//調(diào)用方法
window.onload=function(){
    $().getClass("red").getElement(1).css("color","red").html("title");
};



如果需要設(shè)置的css有區(qū)域的劃分，如需要設(shè)置id="aaa"區(qū)域中的class="red"的color:red；id="bbb"區(qū)域中的class=‘red’的color:green;則需要在css方法中傳入?yún)^(qū)域的id值，代碼如下：


//獲取class節(jié)點數(shù)組
Base.prototype.getClass=function(className,id){
    //定義node用于獲取節(jié)點的范圍
    var node=null;
    //判斷傳入的參數(shù)個數(shù)，如果傳入兩個參數(shù)，則node為傳入id下的
    if(arguments.length==2){
        node = document.getElementById(id);
    }else{
        //默認時為全部節(jié)點
        node = document;
    }
    //首先所有的節(jié)點
    var arr = node.getElementsByTagName("*");
    for (var i=0;i
封裝addClass()方法

如果我們在style樣式表里設(shè)置了class a , class b的樣式，并需要在指定的元素節(jié)點上可以同時應(yīng)用a、b 的樣式，可以封裝addClass()方法，具體代碼如下：


    //添加class,要求元素節(jié)點上可以同時添加多個class值,以空格隔開
    Base.prototype.addClass=function(className){
        for (var i=0;i
封裝removeClass()方法

如果我們在需要移除指定的元素節(jié)點上的某個class的樣式,可以封裝removeClass()方法，具體代碼如下：


//移除class,傳入需要移除的className
Base.prototype.removeClass=function(className){
    for (var i=0;i

以上內(nèi)容來自李炎恢老師JavaScript課程實戰(zhàn)篇筆記整理

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

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

相關(guān)文章

  • JS實現(xiàn)博客前端頁面（四） —— 封裝彈窗組件

    摘要：在實現(xiàn)博客前端頁面一和實現(xiàn)博客前端頁面二中已經(jīng)實現(xiàn)了對獲取元素和樣式相關(guān)的方法的封裝，本文將在實現(xiàn)博客前端頁面三的基礎(chǔ)上實現(xiàn)彈窗組件封裝。 在JS實現(xiàn)博客前端頁面（一） 和JS實現(xiàn)博客前端頁面（二）中已經(jīng)實現(xiàn)了對獲取DOM元素和CSS樣式相關(guān)的方法的封裝，本文將在JS實現(xiàn)博客前端頁面（三）的基礎(chǔ)上實現(xiàn)彈窗組件封裝。 界面設(shè)計 如下圖所示，在點擊登錄按鈕后，會彈出網(wǎng)站登錄的彈窗：該彈窗組...

    PumpkinDylan 評論0 收藏0

  • JS實現(xiàn)博客前端頁面（三） ——封裝下拉菜單

    摘要：在實現(xiàn)博客前端頁面一和實現(xiàn)博客前端頁面二中已經(jīng)實現(xiàn)了對獲取元素和樣式相關(guān)的方法的封裝，本文將實現(xiàn)下拉菜單組件封裝。 在JS實現(xiàn)博客前端頁面（一） 和JS實現(xiàn)博客前端頁面（二）中已經(jīng)實現(xiàn)了對獲取DOM元素和CSS樣式相關(guān)的方法的封裝，本文將實現(xiàn)下拉菜單組件封裝。 下拉菜單 界面設(shè)計 創(chuàng)建一個頂部header區(qū)域，放入logo圖片和個人中心，鼠標(biāo)滑過個人中心時，會顯示下拉菜單，鼠標(biāo)移出時會...

    _Suqin 評論0 收藏0

  • 架構(gòu)師之路

    摘要：因為用戶不用在第一次進入應(yīng)用時下載所有代碼，用戶能更快的看到頁面并與之交互。譯高階函數(shù)利用和來編寫更易維護的代碼高階函數(shù)可以幫助你增強你的，讓你的代碼更具有聲明性。知道什么時候和怎樣使用高階函數(shù)是至關(guān)重要的。 Vue 折騰記 - (10) 給axios做個挺靠譜的封裝(報錯,鑒權(quán),跳轉(zhuǎn),攔截,提示) 稍微改改都能直接拿來用~~~喲吼吼,喲吼吼..... 如何無痛降低 if else 面...

    NikoManiac 評論0 收藏0

  • 前端相關(guān)大雜燴

    摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時，老司機們首先就會告訴你其實是個沒有網(wǎng)絡(luò)請求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡單 原文地址：Learning React.js is easier than you think 原文作...

    fuyi501 評論0 收藏0

  • JS實現(xiàn)博客前端頁面（一）—— 封裝基礎(chǔ)庫

    摘要：創(chuàng)建基本庫首先創(chuàng)建一個基本庫，名字叫做用于編寫最常用的代碼，然后不斷的擴展封裝。 1、創(chuàng)建基本庫 首先創(chuàng)建一個基本庫，名字叫做base.js,用于編寫最常用的代碼，然后不斷的擴展封裝。在最常用的代碼中，最常用的就是獲取節(jié)點的方法。這里我們可以編寫代碼如下： //創(chuàng)建base.js //整個庫可以是一個對象 var Base={ //方法名盡可能簡短而富有意義 getId...

    UCloud 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<