原生js对class常用操作

来源:互联网 发布:美容仪原理 知乎 编辑:程序博客网 时间:2024/05/17 23:56
  // 根据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, ' '));    }}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"); function navTag(nav_ls_id, nav_con_id,nav_ls_item,nav_con_item) {    if (document.getElementById(nav_ls_id) && document.getElementById(nav_con_id)) {         var nav_ls_item = document.getElementById(nav_ls_id).getElementsByTagName(nav_ls_item);        var nav_con_item = document.getElementById(nav_con_id).getElementsByTagName(nav_con_item);        var len = nav_ls_item.length;        addClass(nav_ls_item[0],"active")        addClass(nav_con_item[0],"active")        for (var i = 0; i < len; i++) {            nav_ls_item[i].setAttribute("data-index", i);            nav_con_item[i].setAttribute("data-index", i);        }        for (var i = 0; i < len; i++) {            nav_ls_item[i].onclick = function() {                for (var i = 0; i < len; i++) {                    delClass(nav_ls_item[i],"active");                    delClass(nav_con_item[i],"active")                }                addClass(this,"active")                _index = this.getAttribute("data-index");                addClass(nav_con_item[_index],"active")            }        }   }}navTag("cat_hot", "hot_con","a","dl")