原生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")
阅读全文
0 0
- 原生js对class常用操作
- js 原生常用操作
- 原生js对cookie操作
- 原生js对dom点的操作
- 原生js来实现对dom元素class的操作方法
- 原生js实现对class的增删改
- 原生Js对html文档的属性操作
- javascript学习笔记--js对html对象的原生操作
- 原生JS获取所有CLASS
- 原生js添加删除class
- 原生js实现的class
- 原生JS添加删除Class
- 原生JS操作DOM的一些常用方法集合【转】
- 原生JS操作DOM的一些常用方法集合【转】
- 原生JS实现几个常用DOM操作API
- 浅谈原生JS操作DOM常用的属性和方法
- 表单常用原生js
- js原生常用库
- Item46 努力使失败保持原子性
- AndroidN多窗口支持
- 原生js封装函数,addClass removeClass,常用tag切换
- 条件随机场与图像分割
- curl wget的使用以及socket实现
- 原生js对class常用操作
- hdu 1303 Doubles
- HDU 1372 Knight Moves
- 01--MySQL自学教程:数据库MySQL安装和校验
- 握手协议(RFC 5246节选)
- hadoop + zookeeper 安装部署
- ./和../的作用
- SSH与SQLite的相关配置
- Ubuntu下强制关闭 eclipse的命令