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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
Angular2内置指令NgFor和NgIf详解
Aug 03 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
图文讲解vue的v-if使用方法
Feb 11 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
eWebEditor v3.8 商业完整版 (PHP)
2006/12/06 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
PHP中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php倒计时出现-0情况的解决方法
2016/07/28 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
nodejs实现的一个简单聊天室功能分享
2014/12/06 NodeJs
详解Javascript动态操作CSS
2014/12/08 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
微信小程序收藏功能的实现代码
2020/06/19 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
python统计字符的个数代码实例
2020/02/07 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python手写均值滤波
2020/02/19 Python
使用python实现名片管理系统
2020/06/18 Python
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
Fossil美国官网:化石手表、手袋、首饰及配饰
2019/02/17 全球购物
优秀本科毕业生自荐信
2014/07/04 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2014年民警工作总结
2014/11/25 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python