原生JavaScript實現hasClass、addClass、removeClass、toggleClass

来源:http://www.cnblogs.com/givebest/archive/2016/08/20/5790034.html
-Advertisement-
Play Games

相容IE6+，因IE6、IE7、IE8不支持`Array.prototype.indexOf()`和`String.prototype.trim()`，分別用`Polyfill`實現支持。 ...


相容IE6+，因IE6、IE7、IE8不支持Array.prototype.indexOf()和String.prototype.trim()，分別用Polyfill實現支持。
詳細：
indexOf https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
trim： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim

由於現代瀏覽器都基本支持了classList，所以移動端可以直接使用classList會更方便一些，如：

<div class="foo bar" id="div"></div>
var div = document.getElementById('div');

div.classList.remove("foo");
div.classList.add("anotherclass");
div.classList.toggle("visible");

div.classList.contains("foo");   //

div.classList.add("foo","bar");  //Android4.3不支持
  1. 應該避免直接使用多個參數，支持不全面。
  2. SVG 和 MathML 元素支持度也不全面（這個坑下麵的代碼並未填上，請熟知，有興趣的可以查下Zepto是怎麼填坑的）。
    classList支持明細： http://caniuse.com/#search=classList

代碼

Polyfill

// 讓低版本IE支持 Array.prototype.indexOf
// Polyfill (indexOf @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
  if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(searchElement, fromIndex) {

      var k;
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);
      var len = o.length >>> 0;
      if (len === 0) {
        return -1;
      }

      var n = +fromIndex || 0;
      if (Math.abs(n) === Infinity) {
        n = 0;
      }

      if (n >= len) {
        return -1;
      }

      k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

      while (k < len) {
        if (k in o && o[k] === searchElement) {
          return k;
        }
        k++;
      }
      return -1;
    };

  }

  // 讓低版本IE支持 String.prototype.trim()
  // Polyfill (trim @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
  if (!String.prototype.trim) {
    String.prototype.trim = function(){
      return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
    };
  }

支持 classList 實現方式

function ctrlClass(opts) {
    if (!opts.ele || !opts.c) return false;
    // console.log(opts.c)
    var c = null;
    typeof (opts.c) === 'string' ? 
    c = opts.c.trim().replace(/\s+/g, ' ').split(' ') :
    c = opts.c;  //修複不規範傳參
    
    return opts.fun({
        ele: opts.ele,
        c: c
    });
    opts.ele = null;
}

/**
 * hasClass
 * @param (element, 'c1 c2 c3 c4 c5')
 */
 function hasClass(ele, c) {
    return ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
            return opts.c.every(function(v) {
                return !!opts.ele.classList.contains(v);
            });
        }
     });
 }

 /**
 * addClass
 * @param (element, 'c1 c2 c3 c4 c5')
 */
 function addClass(ele, c) {
    return ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
            var ele = opts.ele,
                c = opts.c;
            c.forEach(function(v) {
                if (!hasClass(ele, v)) {
                    ele.classList.add(v);
                }
            });
        }
    })
 }

 /**
  * removeClass
  * @param (element, 'c1 c2 c3')
 */
 function removeClass(ele, c) {
  ctrlClass({
    ele: ele,
    c: c,
    fun: function(opts) {
      var ele = opts.ele,
          c = opts.c;
      c.forEach(function(v) {
        // TODO 是否有必要判斷 hasClass
        // if (!hasClass(ele, v)) {
          ele.classList.remove(v);
        // }
      });
    }
  });
 }


 /**
  * toggleClass
  * @param (element, 'c1 c2 c3')
 */
 function toggleClass(ele, c) {
  ctrlClass({
    ele: ele,
    c: c,
    fun: function(opts) {
      var ele = opts.ele,
          c = opts.c;
      c.forEach(function(v) {
        ele.classList.toggle(v);
      })
    }
  })
 }

不支持 classList 實現方式

/**
 * hasClass
 * @param (element, 'c1 c2 c3 c4 c5')
 */
 function hasClass(ele, c) {
    return ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
            var cln = opts.ele.className.split(' ');
            var c = opts.c;
            for (var i = 0; i < c.length; i++) {
                if(cln.indexOf(c[i]) !== -1){
                    return true;
                }
            }
            return false;
        }
     });
 }


 /**
  * addClass
  * @param (element, 'c1 c2 c3')
 */
 function addClass(ele, c) {
  ctrlClass({
    ele: ele,
    c: c,
    fun: function(opts) {
      var ele = opts.ele,
          c = opts.c;
      for (var i = 0; i < c.length; i++) {
        if(!hasClass(ele, c[i])) {
          ele.className = ele.className !== '' ? (ele.className + ' ' + c[i]) : c[i];
        }
      }  
    }
  });
 }


 /**
  * removeClass
  * @param (element, 'c1 c2 c3')
 */
 function removeClass(ele, c) {
  ctrlClass({
    ele: ele,
    c: c,
    fun: function(opts) {
      var ele = opts.ele,
          c = opts.c,
          cln = ele.className.split(' ');
      for (var i = 0; i < c.length; i++) {
        if (hasClass(ele, c[i])) {
          cln.splice(cln.indexOf(c[i]), 1);
        }
      }
      ele.className = cln.join(' ');
    }
  });
 }

 /**
  * toggleClass
  * @param (element, 'c1 c2 c3')
 */
 function toggleClass(ele, c){
  ctrlClass({
    ele: ele,
    c: c,
    fun: function(opts) {
      var ele = opts.ele,
          c = opts.c;
      for (var i = 0; i < c.length; i++) {
        !!hasClass(ele, c[i]) ? removeClass(ele, c[i]) : addClass(ele, c[i]);  
      }
    }
  });
 }

完整代碼

// Polyfill (indexOf @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf)
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function(searchElement, fromIndex) {

  var k;
  if (this == null) {
    throw new TypeError('"this" is null or not defined');
  }

  var o = Object(this);
  var len = o.length >>> 0;
  if (len === 0) {
    return -1;
  }

  var n = +fromIndex || 0;
  if (Math.abs(n) === Infinity) {
    n = 0;
  }

  if (n >= len) {
    return -1;
  }

  k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

  while (k < len) {
    if (k in o && o[k] === searchElement) {
      return k;
    }
    k++;
  }
  return -1;
};

}


  // Polyfill (trim @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim)
  if (!String.prototype.trim) {
    String.prototype.trim = function(){
      return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
    };
  }

var cl = ('classList' in document.createElement('a'));


function ctrlClass(opts) {
    if (!opts.ele || !opts.c) return false;
    // console.log(opts.c)
    var c = null;
    typeof (opts.c) === 'string' ? 
    c = opts.c.trim().replace(/\s+/g, ' ').split(' ') :
    c = opts.c;  //修複不規範傳參
    
    return opts.fun({
        ele: opts.ele,
        c: c
    });
    opts.ele = null;
}   

// 支持 classList
if(cl){
    /**
     * hasClass
     * @param (element, 'c1 c2 c3 c4 c5')
     */
     function hasClass(ele, c) {
        return ctrlClass({
            ele: ele,
            c: c,
            fun: function(opts) {
                return opts.c.every(function(v) {
                    return !!opts.ele.classList.contains(v);
                });
            }
         });
     }

     /**
     * addClass
     * @param (element, 'c1 c2 c3 c4 c5')
     */
     function addClass(ele, c) {
        return ctrlClass({
            ele: ele,
            c: c,
            fun: function(opts) {
                var ele = opts.ele,
                    c = opts.c;
                c.forEach(function(v) {
                    if (!hasClass(ele, v)) {
                        ele.classList.add(v);
                    }
                });
            }
        })
     }

     /**
      * removeClass
      * @param (element, 'c1 c2 c3')
     */
     function removeClass(ele, c) {
      ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
          var ele = opts.ele,
              c = opts.c;
          c.forEach(function(v) {
            // TODO 是否有必要判斷 hasClass
            // if (!hasClass(ele, v)) {
              ele.classList.remove(v);
            // }
          });
        }
      });
     }


     /**
      * toggleClass
      * @param (element, 'c1 c2 c3')
     */
     function toggleClass(ele, c) {
      ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
          var ele = opts.ele,
              c = opts.c;
          c.forEach(function(v) {
            ele.classList.toggle(v);
          })
        }
      })
     }




}else{
    /**
     * hasClass
     * @param (element, 'c1 c2 c3 c4 c5')
     */
     function hasClass(ele, c) {
        return ctrlClass({
            ele: ele,
            c: c,
            fun: function(opts) {
                var cln = opts.ele.className.split(' ');
                var c = opts.c;
                for (var i = 0; i < c.length; i++) {
                    if(cln.indexOf(c[i]) !== -1){
                        return true;
                    }
                }
                return false;
            }
         });
     }


     /**
      * addClass
      * @param (element, 'c1 c2 c3')
     */
     function addClass(ele, c) {
      ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
          var ele = opts.ele,
              c = opts.c;
          for (var i = 0; i < c.length; i++) {
            if(!hasClass(ele, c[i])) {
              ele.className = ele.className !== '' ? (ele.className + ' ' + c[i]) : c[i];
            }
          }  
        }
      });
     }


     /**
      * removeClass
      * @param (element, 'c1 c2 c3')
     */
     function removeClass(ele, c) {
      ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
          var ele = opts.ele,
              c = opts.c,
              cln = ele.className.split(' ');
          for (var i = 0; i < c.length; i++) {
            if (hasClass(ele, c[i])) {
              cln.splice(cln.indexOf(c[i]), 1);
            }
          }
          ele.className = cln.join(' ');
        }
      });
     }

     /**
      * toggleClass
      * @param (element, 'c1 c2 c3')
     */
     function toggleClass(ele, c){
      ctrlClass({
        ele: ele,
        c: c,
        fun: function(opts) {
          var ele = opts.ele,
              c = opts.c;
          for (var i = 0; i < c.length; i++) {
            !!hasClass(ele, c[i]) ? removeClass(ele, c[i]) : addClass(ele, c[i]);  
          }
        }
      });
     }
}

使用

var ele = document.getElementById('test');
hasClass(ele, 'c1');
addClass(ele, 'c1 c2 c3');
removeClass(ele, 'c1 c2 c3');
toggleClass(ele, 'c1 c2 c3');

項目

https://github.com/givebest/ctrl-cssClass


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • <![CDATA[的web使用簡單說明
    html、javascript會涉及到三個解析器，html解析器、xml解析器、javascript解析器。那麼好了，問題來了，以上代碼經常混編在一起，各自有各自的規則，終究會有衝突的，如下就是衝突。 根據W3C XHTML 1.0的規定：在XHTML中，因為<和&這兩個符號有特殊意義（小於號用於標 ...
  • 網站logo正確寫法，個人拙見，不喜勿噴
    網站logo既要考慮seo又需要用圖片代替網站名字，所有H1標簽帶來的權重還是需要使用 有些人喜歡直接把<H1></H1>標簽直接hidden掉，個人喜歡使用css Text-indent還是放到屏幕外 .logo h1 { overflow: hidden; position: absolute; ...
  • 正則表達式個人總結(二)：正則表達式語法的深入理解第二部分
    4.選擇與分組 （1）.分組 字元組[]:表示匹配若幹個字元之一 字元組可以淺顯的理解為一些字元的組合，字元組與普通字元的區別在於：abc普通字元表示匹配a接下來b接下來c而字元組[abc]表示在同一位置匹配a或者b或者c；由於字元組本身的含義也決定了可以將這個字元組看成是一個普通的特殊字元。 普通 ...
  • webpack學習總結
    前言 在還未接觸webpack，就有幾個疑問： 1. webpack本質上是什麼？ 2. 跟非同步模塊載入有關係嗎？ 3. 可否生成多個文件，一定是一個？ 4. 被引用的文件有其他非同步載入模塊怎麼辦？ 在學習webpack時，也有幾個疑問： 1. webpack有哪些常用的插件？ 2. 常用的Load ...
  • 原生JS實現-星級評分系統
    今天我又寫了個很酷的實例：星級評分系統（可自定義星星個數、顯示信息） 使用預設值5個星星，預設信息 `var msg = [........]; sufuStar.star(10,msg);`自定義星星個數為10、顯示信息msg格式參考預設值，條數必須和星星個數一致； 自己實現一些實例，有個好處，能 ...
  • javascript--函數定義與函數作用域--詳解
    最近在學習javascript的函數，函數是javascript的一等對象，想要學好javascript，就必須深刻理解函數。本人把思路整理成文章，一是為了加深自己函數的理解，二是給讀者提供學習的途徑，避免走彎路。內容有些多，但都是筆者對於函數的總結。 1.函數的定義 1.1：函數聲明 1.2：函數 ...
  • JavaScript基礎
    JavaScript基礎 JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，所以在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器可以解釋並做出相應的處理。 一、基本知識 (一)、存在形式 1、JavaScript代碼存在形式 2、JavaScript ...
  • JavaScript作用域
    JavaScript作用域 JavaScript作用域一直是前端開發的難題，現在只要用五句話就可解決。 一、“JavaScript中無塊級作用域” 在Java或C#中存在塊級作用域，即：大括弧也是一個作用域。 public static void Main() { if(1==1){ string ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類