JS實現博客前端頁面（二）—— 封裝CSS

cyqian 發布于2019-08-22 10:37 / 3098人閱讀

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

在JS實現博客前端頁面（一）中已經實現了CSS的一些基礎封裝，在本文中將繼續封裝CSS

封裝getClass()方法

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

//獲取class節點數組
Base.prototype.getClass=function(className){
    //首先所有的節點
    var arr = document.getElementsByTagName("*");
    for (var i=0;i
但有時候，我們不需要把所有獲取到的class都設置CSS，只需要設置其中的某一個，這時我們可以進行篩選，封裝getElement()方法，代碼如下：
//獲取某一個節點,傳入節點的number值
Base.prototype.getElement=function(num){
    //獲取傳入num對應的element值
    var element = this.elements[num];
    //清空this.elements數組
    this.elements = [];
    //將獲取的element值再加入到數組中,當前數組中只有一個值
    this.elements[0]=element;
    //返回Base對象
    return this;
}
//調用方法
window.onload=function(){
    $().getClass("red").getElement(1).css("color","red").html("title");
};

如果需要設置的css有區域的劃分，如需要設置id="aaa"區域中的class="red"的color:red；id="bbb"區域中的class=‘red’的color:green;則需要在css方法中傳入區域的id值，代碼如下：
//獲取class節點數組
Base.prototype.getClass=function(className,id){
    //定義node用于獲取節點的范圍
    var node=null;
    //判斷傳入的參數個數，如果傳入兩個參數，則node為傳入id下的
    if(arguments.length==2){
        node = document.getElementById(id);
    }else{
        //默認時為全部節點
        node = document;
    }
    //首先所有的節點
    var arr = node.getElementsByTagName("*");
    for (var i=0;i
封裝addClass()方法
如果我們在style樣式表里設置了class a , class b的樣式，并需要在指定的元素節點上可以同時應用a、b 的樣式，可以封裝addClass()方法，具體代碼如下：
    //添加class,要求元素節點上可以同時添加多個class值,以空格隔開
    Base.prototype.addClass=function(className){
        for (var i=0;i
封裝removeClass()方法
如果我們在需要移除指定的元素節點上的某個class的樣式,可以封裝removeClass()方法，具體代碼如下：
//移除class,傳入需要移除的className
Base.prototype.removeClass=function(className){
    for (var i=0;i
以上內容來自李炎恢老師JavaScript課程實戰篇筆記整理

GPU云服務器云服務器 JS輕松實現CSS設置 js實現頁面表格 js 實現頁面滑動 js實現頁面跳轉

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90932.html

JS實現博客前端頁面（四） —— 封裝彈窗組件

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

PumpkinDylan 2019-08-22 10:37 評論0 收藏0
JS實現博客前端頁面（三） ——封裝下拉菜單

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

_Suqin 2019-08-22 10:37 評論0 收藏0
架構師之路

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

NikoManiac 2019-08-22 11:22 評論0 收藏0
前端相關大雜燴

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

fuyi501 2019-08-22 13:46 評論0 收藏0
JS實現博客前端頁面（一）—— 封裝基礎庫

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

UCloud 2019-08-22 10:36 評論0 收藏0