js控制class常用函数

来源:互联网 发布:让 皮埃尔.热内 知乎 编辑:程序博客网 时间:2024/05/29 12:04
   // 根据class 获取元素var getElement = function(selector) {        return document.querySelector(selector);    }    // 根据class 获取所有class 的元素var getAllElement = function(selector) {        return document.querySelectorAll(selector);    }    // 获取元素classvar getClass = function(element) {        return element.getAttribute("class");    }    // 给元素设置classvar setClass = function(element, cls) {        return element.setAttribute("class", cls);    }    // 给元素添加样式var addClass = function(element, cls) {        var baseCls = getClass(element);        if (baseCls.indexOf(cls) === -1) {            setClass(element, baseCls + " " + cls);        }    }    // 元素删除指定样式var delClass = function(element, cls) {    var baseCls = getClass(element);    if (baseCls.indexOf(cls) != -1) {        setClass(element, baseCls.split(cls).join(' ').replace(/\s+/g, ' '));    }}window.onscroll = function() {    var top = document.body.scrollTop;    if (getElement(".pro_nav")) {        if (top > 700) {            addClass(getElement(".pro_nav"), "active");        } else {            delClass(getElement(".pro_nav"), "active");        }    }        if (getElement(".sol_nav")) {        if (top > 700) {            addClass(getElement(".sol_nav"), "active");        } else {            delClass(getElement(".sol_nav"), "active");        }    }}function nav_onclick(el) {     var list_item = getAllElement(el);     var _len = list_item.length;     if (list_item) {        for (var i = 0; i < _len; i++) {            list_item[i].onclick = function () {                for (var i = 0; i < _len; i++) {                    delClass(list_item[i],"active");                }                addClass(this,"active");            }        }     }}nav_onclick(".el");
0 0
原创粉丝点击