纯javascript实现toogleClass功能

发表于 2020-05-30   |   分类于 笔记

我的主题大多数都非常轻量,往往需要通过纯js、css实现想要的功能,toogle在jquery中是基础功能,不过js就需要自己动手了。并且这个功能极其常用、底层。比如点击切换菜单..

方法一

function tg_c(id, nc) {
    var e = document.getElementById(id);
    var c = e.className;
    if (!c) {
        e.className = nc
    } else {
        var classArr = c.split(' ');
        var exist = false;
        for (var i = 0; i < classArr.length; i++) {
            if (classArr[i] === nc) {
                classArr.splice(i, 1);
                e.className = Array.prototype.join.call(classArr, " ");
                exist = true;
                break
            }
        }
        if (!exist) {
            classArr.push(nc);
            e.className = Array.prototype.join.call(classArr, " ")
        }
    }
}

方法二

检测

function arrIndexOf(arr, v) { //检测数组中是否有相同的值存在,并且返回它的位置;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == v) {
            return i;
        }
    }
    return -1;
}

添加class

function addClass(obj, cls) {
        if (obj.className === '') {
            obj.className = cls;
        } else {
            var arrclassname = obj.className.split(' ');
            var index = arrIndexOf(arrclassname, cls);
            if (index == -1) {
                obj.className += ' ' + cls;
            }
        }
    }

删除class

function removeClass(obj, cls) {
    //如果有class的话:
    if (obj.className !== '') {
        var arrClassName = obj.className.split(' '); //对原有class进行拆分,看看是否包含需要移除的class,也就是传参cls的classname;
        var index = arrIndexOf(arrClassName, cls);
        //r如果有需要移除的class
        if (index != -1) {
            arrClassName.splice(index, 1);
            obj.className = arrClassName.join('');
        }
    }
}

实现toggleClass

function toggleClass(obj, cls) {
    obj = document.getElementById(obj);
    hasClass(obj, cls) ? removeClass(obj, cls) : addClass(obj, cls);
}

番外:getByClass

function getByClass(oParent, sClass) {
    if (oParent.getElementsByClassName) {
        return oParent.getElementsByClassName(sClass);
    } else { //IE 8 7 6
        var arr = [];
        var reg = new RegExp('\\b' + sClass + '\\b');
        var aEle = oParent.getElementsByTagName('*');
        for (var i = 0; i < aEle.length; i++) {
            if (reg.test(aEle[i].className)) {
                arr.push(aEle[i]);
            }
        }
        return arr;
    }
}

利用Attr和css实现toggle功能

比如切换菜单之类的

function toggleAttr(obj,attr) {
    obj = document.getElementById(obj);
    if (obj.getAttribute(attr) == 'on') {
        obj.setAttribute(attr,'off');
    } else {
        obj.setAttribute(attr,'on');
    }
}

然后配合CSS样式表

#menu[mobile="on"] .x{display:block;}
#menu[mobile="off"] .x{display:none;}
© 2020 Powered by Typecho & Theme Quark