zoukankan      html  css  js  c++  java
  • 原生js addclass,hasClass,removeClass,toggleClass的兼容

    (function (window) {
    
        'use strict';
    
        // class helper functions from bonzo https://github.com/ded/bonzo
    
        function classReg(className) {
            return new RegExp("(^|\s+)" + className + "(\s+|$)");
        }
    
        // classList support for class management
        // altho to be fair, the api sucks because it won't accept multiple classes at once
        var hasClass,
        addClass,
        removeClass;
    
        if ('classList' in document.documentElement) {
            hasClass = function (elem, c) {
                return elem.classList.contains(c);
            };
            addClass = function (elem, c) {
                elem.classList.add(c);
            };
            removeClass = function (elem, c) {
                elem.classList.remove(c);
            };
        } else {
            hasClass = function (elem, c) {
                return classReg(c).test(elem.className);
            };
            addClass = function (elem, c) {
                if (!hasClass(elem, c)) {
                    elem.className = elem.className + ' ' + c;
                }
            };
            removeClass = function (elem, c) {
                elem.className = elem.className.replace(classReg(c), ' ');
            };
        }
    
        function toggleClass(elem, c) {
            var fn = hasClass(elem, c) ? removeClass : addClass;
            fn(elem, c);
        }
    
        var classie = {
            // full names
            hasClass : hasClass,
            addClass : addClass,
            removeClass : removeClass,
            toggleClass : toggleClass,
            // short names
            has : hasClass,
            add : addClass,
            remove : removeClass,
            toggle : toggleClass
        };
    
        // transport
        if (typeof define === 'function' && define.amd) {
            // AMD
            define(classie);
        } else {
            // browser global
            window.classie = classie;
        }
    
    })(window);

    经测试,兼容IE8以下;

    参考:https://github.com/ded/bonzo

  • 相关阅读:
    实现类似add(1)(2)(3)的函数
    Chrome安装助手踩坑
    升级webpack4错误处理
    vue项目埋点
    如何理解vue中的v-bind?
    不能不知道的webpack基本配置
    IE9及以下浏览器升级提示
    HTML5常用API
    css中clip属性
    Web开发展望
  • 原文地址:https://www.cnblogs.com/jone-chen/p/5952942.html
Copyright © 2011-2022 走看看