在JS中我们经常会会用到，获取一个标签的id

var aId=document.getElementById("id")

现在虽然有getElementsByClassName这个方法，但是这个方法再ie6下兼容性存在问题，所以保险起见还是封一个获取class的库

首先先看库

/**

 * Created by asus on 2016/12/4 By dirk_jian.

 */

function getByclass(oParent,sClass){

    var aEle=oParent.getElementsByTagName('*');

    var aResult=[];

    var re=new RegExp('\\b'+sClass+'\\b','i');

    for(var i=0;i<aEle.length;i++){

//            if(aEle[i].className==sClass)             //如果有多个class那就无法检测了

//            if(aEle[i].className.search(sClass)!=-1)  //!=-1证明其有sCalss，但是只是有class这几个字母就行，无法全面达到目的

        if(re.test(aEle[i].className))                //这个就是不限制范围的检测

        {

            aResult.push(aEle[i]);

        }

    }

    return aResult;

}

再看如何调用并对获取到的class的标签进行css样式的修改

 <script src="getByclass.js"></script>

    <script>

        window.onload=function(){

            oUl=document.getElementById("div1");

            var aDiv1=getByclass(oUl,'div2');

            var aDiv2=getByclass(oUl,'div3');

            for(var i=0;i<aDiv1.length;i++){

                aDiv1[i].style.border='1px solid black';

                aDiv1[i].style.width='100px';

                aDiv1[i].style.height='100px';

            }

            for(var i=0;i<aDiv2.length;i++){

                aDiv2[i].style.width='100px';

                aDiv2[i].style.height='100px';

                aDiv2[i].style.border='1px solid pink';

            }

        }

    </script>

以下为HTML

<body>

    <div id="div1">

        <div class="div2"></div>

        <div class="div3"></div>

    </div>

</body>

这样就轻松的可以获取一个标签的class了。

JS中对获取一个标签的class的方法封一个库的更多相关文章

  1. JS中如何获取<Select>中value和text的值

    原文地址:JS中如何获取<Select>中value和text的值 html代码: <select id = "city" onchange="chan ...

  2. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  3. js中的回调函数的理解和使用方法

    js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...

  4. js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  5. php设置cookie,在js中如何获取

    在php中设置cookie. $email="abc@163.com"; setcookie("y_email",$email,time()+3600,&quo ...

  6. 关于js中直接获取后台的值，直接弹窗获取到的值

    js里获取后台的值,以前我都是后台通过jsp中的<input>EL表达式: 后台代码把传向页面的值放入request:request.setAttribute("Success& ...

  7. js中如何获取页面的Url，域名和端口号

    有时候通过获取上个页面的Url来做一个跳转,获取域名防止非正常访问 获取上一个页面的一个URL,这个URL一般做一个页面的跳转 window.location.href <script>w ...

  8. JS中如何获取当前时间及让时间格式化

    JS中获取当前时间和JAVA里获取当前时间一样,都是直接new Date即可.不同的是,JS中用var date=new Date();JAVA中用Data data=new Date();注:JS中 ...

  9. 37-python中bs4获取的标签中如何提取子标签

    如果只是要提取一个标签 里面的属性值啥的,直接看这篇文章就可以了: 23-python用BeautifulSoup用抓取a标签内所有数据 如果是标签的嵌套,可以参考下面的思路,虽然不是很简洁,但是可以 ...

随机推荐

  1. 牛X！看完阿里P8架构师推荐的spring三剑客，成功涨薪5k

    一直以来,Spring都被Java程序员视为杀手级别的应用,是为简化Java EE应用程序的开发为目标而创建的.Spring可以做很多事情,它为企业级开发提供给了丰富的功能,但是这些功能的底层都依赖于 ...

  2. 微信小程序WXML页面常用语法（讲解+示例）

    (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...

  3. VScode+PicGo+Github+jsdelivr使用图床书写Markdown

    本文讲述使用Github作为图床,VScode搭配Picgo插件书写Markdown,并使用jsdelivr进行CDN加速的配置流程. 准备阶段 首先进行以下准备工作,都很简单,不再赘述. 注册Git ...

  4. 精讲响应式WebClient第2篇-GET请求阻塞与非阻塞调用方法详解

    本文是精讲响应式WebClient第2篇,前篇的blog访问地址如下: 精讲响应式webclient第1篇-响应式非阻塞IO与基础用法 在上一篇文章为大家介绍了响应式IO模型和WebClient的基本 ...

  5. Vue管理系统前端系列四组件拆分封装

    目录 组件封装 首页布局拆分后结构 拆分后代码 状态管理中添加 app 模块 组件封装 在上一篇记录中,首页中有太多的代码,为了避免代码的臃肿,需要对主要的功能模块拆分,来让代码看起来更简洁,且能进行 ...

  6. /usr/bin/ld: cannot find -lxxx 问题

    linux下编译应用程序常常会出现如下错误: /usr/bin/ld: cannot find -lxxx 意思是编译过程找不到对应库文件.其中,-lxxx表示链接库文件 libxxx.so. 注:有 ...

  7. springboot的常用注解

    1. @SpringBootApplication2. @Repository3. @Service4. @RestController5. @Controller6. @Component7. @R ...

  8. packmol建模流程-计算

    一.建模流程(modelling procedure): 1.美国数据库下载amc.cif文件:http://rruff.geo.arizona.edu/AMS/amcsd.php 2.导入vesta ...

  9. vps的搭建

    最近一直想自己搭建一款vps使用,但是苦于一直没有时间,直到今天得空,与大家一起分享下. 服务商的选择 因为自己之前在 vultr 上还留有余额(60$呢,好几百块大洋呢),所以我的服务商就选择 vu ...

  10. 哇，ElasticSearch多字段权重排序居然可以这么玩

    背景 读者提问:ES 的权重排序有没有示列,参考参考? 刚好之前也稍微接触过,于是写了这篇文章,可以简单参考下. 在很多复杂的业务场景下,排序的规则会比较复杂,单一的降序,升序无法满足日常需求.不过 ...