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 相关文章推荐
基于JQuery的日期联动实现代码
Feb 24 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
jQuery中库的引用方法
Jan 06 jQuery
详解基于vue的服务端渲染框架NUXT
Jun 20 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
keep-alive保持组件状态的方法
Dec 02 Javascript
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
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
js window.event对象详尽解析
2009/02/17 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jQuery实现可展开折叠的导航效果示例
2016/09/12 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
简介Python的collections模块中defaultdict类型的用法
2016/07/07 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
python常用数据重复项处理方法
2019/11/22 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
自学考试自我鉴定范文
2013/09/26 职场文书
学雷锋宣传标语
2014/06/25 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
会计出纳岗位职责
2015/03/31 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
六一儿童节致辞
2015/07/31 职场文书
小学运动会入场口号
2015/12/24 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书