精华内容
下载资源
问答
  • 通过className获取元素,不同的浏览器会有不同的支持情况,所以为了...function byclass(classn){//全局获取类 var tags=document.all ? document.all : document.getElementsByTagName('*'); var arr=[]; for...

    通过className获取元素,不同的浏览器会有不同的支持情况,所以为了兼容各个浏览器在这里,我写了几个函数获取className的值

    function byclass(classn){//全局获取类
    var tags=document.all ? document.all : document.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
    //获取只有一个类名的元素
    if (tags[i].className==classn) {
    arr.push(tags[i]);
    }
    };
    return arr;
    }


    function byclass2(classn){//全局获取类
    var tags=document.all ? document.all : document.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
    //可获取有多个类名的元素
    if (tags[i].className.indexOf(classn)!=-1) {
    arr.push(tags[i]);
    }
    };
    return arr;
    }
    function getclass(parentID,classn){//局部获取类
    var parent=document.getElementById(parentID);
    var tags=parent.all?parent.all:parent.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
    //获取只有一个类名的元素
    if (tags[i].className==classn) {
    arr.push(tags[i]);
    }
    };
    return arr;
    }
    function getclass2(parentID,classn){//局部获取类
    var parent=document.getElementById(parentID);
    var tags=parent.all?parent.all:parent.getElementsByTagName('*');
    var arr=[];
    for (var i = 0; i < tags.length; i++) {
    //可获取有多个类名的元素
    if (tags[i].className.indexOf(classn)!=-1) {
    arr.push(tags[i]);
    }
    };
    return arr;
    }

    转载于:https://www.cnblogs.com/D-Y-W/p/6994320.html

    展开全文
  • js封装:获取class类名

    千次阅读 2017-01-08 18:08:26
    function getByClass(oParent,sClass){ var aResult = []; var aEle = oParent.getElementsByTagName('*'); for(var i=0; i;i++){ if(aEle[i].clas
    function getByClass(oParent,sClass){
                var aResult = [];
                var aEle = oParent.getElementsByTagName('*');
                for(var i=0; i<aEle.length;i++){
                    if(aEle[i].className == sClass){
                        aResult.push(aEle[i]);
                    }
                }
                return aResult;
            }
    展开全文
  • /* * 根据class获取元素.* 原理是,取出oparent下的所有元素,组成数组,然后遍历类名,全等判断。*/ 源码 1 1 function getClass(oParent,clsName){ 2 var oParent = document.getElementById(oParent); 3 2 ....

    原理:

    /*
     * 根据class获取元素.
     * 原理是,取出oparent下的所有元素,组成数组,然后遍历类名,全等判断。
    */

    源码

     

     1  1 function getClass(oParent,clsName){
     2     var oParent = document.getElementById(oParent);
     3  2     var boxArr = new Array();
     4  3     oElements  = oParent.getElementsByTagName('*');
     5  4     for(var i=0;i<oElements.length;i++){
     6  5         if(oElements[i].className == clsName){
     7  6             boxArr.push(oElements[i]);
     8  7         }
     9  8     }
    10  9     return boxArr;
    11 10 }

     

     

     

    函数调用

    getClass(oParent,clsName);

    代码解释:

    function getClass(oParent,clsName){
        var boxArr = new Array();
        //boxArr 用来存储获取到的所有class为clsName的元素
        
        oElements  = oParent.getElementsByTagName('*');
        //oElements 获得的是父元素下的所有元素,是一个集合
        
        for(var i=0;i<oElements.length;i++){
            //循环遍历获取到的oElements数组
            
            if(oElements[i].className == clsName){
                //判断数组中,元素的类名如果和传过来的想要获取的类名一致的话
                
                boxArr.push(oElements[i]);
                //利用数组的push功能把对应的元素装进去
            }
        }
        return boxArr;
        //弹出最后的结果
    }

    ________________________________________________________________________________________________________2017-05-21  18:35:10

    丰富一下另一端js

     

    1 <script type="text/javascript">
    2     window.onload = function(){
    3         var oUL = document.getElementById("ul1");
    4         var oLi = getByClass(oUL,"li_box");
    5         for(var i=0;i<oLi.length;i++){
    6             oLi[i].style.background = "red"
    7         }
    8     }
    9 </script>

     

     

    解释:

    var oUL = document.getElementById("ul1");

    //获取到需要的找class的父元素


    var oLi = getByClass(oUL,"li_box");

    //让子元素们等于函数返回来的那个数组。其实直接用getElementsByTagName获取到的也是一个元素集合。现在直接等于一个数组,能用的方法和属性则更多了呢!顺便调用函数并传参。参数是父元素的变量和需要找的类名。

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

    //循环弹出来的数组,也就是所有类名为“li_box”的li


    //接下来直接做你想让那些带你需要类名的元素该做的事。
    比如:oLi[i].style.background = "red"

     

     

     

    ——————————————————————————————————————2018年修复bug—————————————————————————————————————

    function getClass(oParent,clsName) {
    	var oParents = document.getElementById(oParent);
    	var boxArr = new Array();
    	var oElements  = oParents.getElementsByTagName('*');
    	for(let i=0;i<oElements.length;i++){
    		var classNameArr = oElements[i].className.split(/\s+/);
    		for (let j = 0; j < classNameArr.length; j++) {
    			if(classNameArr[j] === clsName){
    	        boxArr.push(oElements[i]);
    	    }
    		}
    	    
    	}
    	console.log(boxArr)
    	return boxArr;
    	
    }
    getClass('搜索范围外框的idName','要搜索的className');
    

    这种写法主要是针对,如果你要搜索拥有该className的元素上边,还有别的className,那么之前的程序是做不到的,所以用split把元素上的类名切开来,再进行对比。

    这里,在boxArr.push那里,原来想错了,写的classNameArr[j],后来发现,boxArr最后是一个字符串数组,并不是元素数组,所以改成oElements[i]就可以了。

     

     

    声明:

      请尊重博客园原创精神,转载或使用图片请注明:

      博主:xing.org1^

      出处:http://www.cnblogs.com/padding1015/

      time: 20180106 20:28:32

     

    展开全文
  • 动态设置获取class类名方案

    千次阅读 2019-02-12 11:36:02
  • getElementsByClassName一、方法封装 一、方法封装 Element.prototype.getElementsByClassName = Document.prototype.... //获取所有标签名 var lastDomArray = []; //声明数组保存符合条件的类
  • 1.示例 请将以下代码复制粘贴到自己的编译器上运行,便于理解。 示例 改变宽度 2.关键点 document.getElementsByClassName('item')[0].style.width =...补充 // 与获取class同理. document.getElementsByTagName('');
  • JS封装class类名的函数

    2018-07-28 16:33:20
    function getClass(classname){ // 浏览器支持的情况下 if(document.getElementsByClassName) { return document.getElementsByClassName(classname);...//用来存放符合类名条件的元素 var de...
  • } style> head> <body> <div class="one two">div> 开关灯button> <script> //classList 返回元素类名 var div = document.querySelector('div'); //1.添加类名 div.classList.add('three'); //请在运行后按f12查看...
  • js class类名操作

    2018-04-23 16:32:00
    原生JS添加类名 删除类名 为 <div> 元素添加 class: document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").classList.add...
  • 为 元素添加 class: document.getElementById("myDIV").classList.add("mystyle");   为 元素添加多个类: document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");   为
  • <!... , initial-scale=1.0"> <title></title> ... <div id='box' class="a b c">...通过getAttribute('class')即可获取,或者是获取dom节点的className属性 运行上面的代码就会看到控制台输出对应的类名 a b c
  • classList 用法: const div = document.querySelector('div') div.classList.add('myclass') // 添加类名 div.classList.remove('myclass') // 移除类名 div.classList.replace('myclass','myclass2')...
  • 今天小编就为大家分享一篇vue中动态添加class类名的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • var name = String( $(this).parent().parent().parent().attr('class') ); $("#week-best " + "." + name +" .want-to a").removeClass('active'); $(this).addClass("active"); },function(){ $(this)....
  • element.className = '类名'; /* * .setAttribute 用来设置自定义属性和值的 * 自定义属性:原本标签中没有这个属性,为了存储数据,方便操作自己设置添加的。 * 自定义属性无法直接通过DOM对象的方式获取或设置...
  • 这是一道刷到的面试题,感觉在某些框架里也看到过类似的用法,正则匹配类名,id什么的,当然不一定跟我写的一样,如有更好办法,欢迎分享。 function getClass() { var arr = []; var str2 = document....
  • js封装获取元素类名(className)的方法

    千次阅读 2017-04-11 12:42:37
    封装了一个方法,用来通过父元素获取节点下的指定类名元素
  • 基本方法 ... 添加:document.getElementById("id").classList.add("类名"); 删除:document.getElementById("id").classList.remove("类名"); 方法2 var classVal=document.getEleme...
  • Vue中添加class类名的方法

    千次阅读 2019-05-30 20:03:13
    Vue添加class类名 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
  • list: [ //一个简单的数组数据 {id : 1, name: '张三'}, ...num=2,//你需要第几个添加class类名 .blur{ //添加的class类名 color: red; } &lt;ul&gt; //当item.id == num时,添加blu...
  • 微信小程序如何动态增删class类名

    万次阅读 2017-06-07 14:36:22
    简述由于微信小程序开发不同于以往的普通web开发, 因此无法通过js获取wxml文件的dom结构, 因此从js上直接添加一个类名应该不可能了. 可是我们可以通过微信小程序数据绑定以及view标签的”data-“自定义属性去更改...
  • * 通过给定的class解析类名(给定类名则直接返回) * @author cuiweiqing 2011-10-9 * @param clzss class对象 * @return 类名 */ function getClassName(clzss){ if(typeof clzss == "string"...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,958
精华内容 17,983
关键字:

js获取class类名