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 相关文章推荐
Javascript string 扩展库代码
Apr 09 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
js实现音乐播放控制条
Sep 09 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
js 实现在2d平面上画8的方法
Oct 10 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
vue动态绑定style样式
Apr 20 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
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
jquery实现的图片点击滚动效果
2014/04/29 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
点球小游戏python脚本
2018/05/22 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python中字符串与编码示例代码
2019/05/20 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
keras中的History对象用法
2020/06/19 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
阿玛瑞酒店中文官方网站:Amari.com
2018/02/13 全球购物
伊索寓言教学反思
2014/05/01 职场文书
高中同学会致辞
2015/08/01 职场文书
职工宿舍管理制度
2015/08/05 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript