javascript中获取class的简单实现

时间:2016-07-12    点击:71   

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 iframe交互并兼容各种浏览器的解决方法
javascript加减乘除的简单实例
浅谈javascript中的加减时间
多功能jQuery树插件zTree实现权限列表简单实例
> 返回     
地址:上海市普陀区胶州路941号长久商务中心 电话: QQ:
© Copyright 2012 上海网络 Product All Rights Reserved