javascript中获取class的简单实现


Posted in Javascript onJuly 12, 2016

js中没有获取class的办法,找了一些封装好的方法,这里整理一下

(1)先进行封装

//封装getClass 
      function getClass(tagName,className) //获得标签名为tagName,类名className的元素 
      { 
        if(document.getElementsByClassName) //支持这个函数 
        {    return document.getElementsByClassName(className); 
        } 
        else 
        {    var tags=document.getElementsByTagName(tagName);//获取标签 
          var tagArr=[];//用于返回类名为className的元素 
          for(var i=0;i < tags.length; i++) 
          { 
            if(tags[i].class == className) 
            { 
              tagArr[tagArr.length] = tags[i];//保存满足条件的元素 
            } 
          } 
          return tagArr; 
        } 
      }

(2)主体程序

<ul>
  <li class="dicTap">1</li>
  <li class="dicTap">2</li>
  <li class="dicTap">3</li>
  <li class="dicTap">4</li>
</ul>

(3)获取class为dicTap的所有li内容程序

window.onload = function()
{  var topMenus = getClass('li','dicTap');
  for(var i=0;i < topMenus.length; i++)
  {
    alert(topMenus[i].innerHTML);    
  }

}

(4)项目中实际应用

//点击的  自定义属性personid,打开详情页面并且进行跨页面传值 
      var dicTap = getClass('li','dicTap'); 
        for(var i=0;i <dicTap.length; i++) 
        { 
          dicTap[i].addEventListener('tap',function(){ 
            var personId=this.getAttribute("personid"); 
            localStorage.a=personId; 
            mui.openWindow({ 
            url: 'disciplineDetail.html', 
            id:'disciplineDetail' 
            }); 
          }) 
        } 
 
      //封装getClass 
      function getClass(tagName,className) //获得标签名为tagName,类名className的元素 
      { 
        if(document.getElementsByClassName) //支持这个函数 
        {    return document.getElementsByClassName(className); 
        } 
        else 
        {    var tags=document.getElementsByTagName(tagName);//获取标签 
          var tagArr=[];//用于返回类名为className的元素 
          for(var i=0;i < tags.length; i++) 
          { 
            if(tags[i].class == className) 
            { 
              tagArr[tagArr.length] = tags[i];//保存满足条件的元素 
            } 
          } 
          return tagArr; 
        } 
      }

以上这篇javascript中获取class的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
载入进度条 效果
Jul 08 Javascript
jQuery 处理网页内容的实现代码
Feb 15 Javascript
js数组操作学习总结
Nov 04 Javascript
将list转换为json失败的原因
Dec 17 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
vue项目中使用scss的方法步骤
May 16 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
Vue h函数的使用详解
Feb 18 Vue.js
springMVC结合AjaxForm上传文件
Jul 12 #Javascript
require简单实现单页应用程序(SPA)
Jul 12 #Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 #Javascript
javascript中Date对象应用之简易日历实现
Jul 12 #Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 #Javascript
浅谈angularJS中的事件
Jul 12 #Javascript
深入剖析JavaScript面向对象编程
Jul 12 #Javascript
You might like
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
关于时间计算的结总
2006/12/06 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
Laravel5中contracts详解
2015/03/02 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
Javascript 面向对象 继承
2010/05/13 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
英文版餐饮业求职信
2013/10/18 职场文书
入党自我评价优缺点
2014/01/25 职场文书
大学旷课检讨书
2014/01/28 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
企业文化演讲稿
2014/05/20 职场文书
党支部四风整改方案
2014/10/25 职场文书
公司车队管理制度
2015/08/04 职场文书
2016年校园植树节广播稿
2015/12/17 职场文书
初中班主任心得体会
2016/01/07 职场文书
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android