获取class

兼容性获取类名元素
本文介绍了一种兼容不同浏览器的方法,用于通过类名选择DOM元素,并提供了两种实用的JavaScript函数实现,一种直接比较类名,另一种利用正则表达式进行匹配。

使用原生JavaScript,获取类操作符时:即使使用getElementByClassName,在Firefox和IE9以下是不兼容的。Firefox下是可以用它获取的到元素而IE不行,一般框架都会实现该方法,达到在IE和Firefox下兼容的问题。

 

下面我写的这个封装,多给了他一个参数(parent),目的在于:(缩小范围)只获取特定id名称下子元素的class名称

学以致用,要学会修改,以便适合自己项目的使用。

function getByClass (clsName,parent) {
  var oParent = parent?document.getElementById(parent):document,
      eles = [] ,
      elements = oParent.getElementsByTagName("*");
  for (var i=0;i<elements.length;i++){
       if (elements[i].className == clsName){
           eles.push (elements[i]); 
        }      
    }  
     return eles;      
}

然后我们还可以通过正则来完美获取:

function getByClass(sClass,parent) {
    var oParent = parent?document.getElementById(parent):document,
        eles = [];
        elements = oParent.getElementsByTagName('*');

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

    for (var i=0;i<elements.length;i++){
        if (re.test(elements[i].className)){
            eles.push(elements[i]);
        }
    }
    return eles;
}

  

 

<think>我们正在使用JavaScript来获取HTML元素的class属性值。根据引用[2],我们可以使用两种方法: 1. 使用element.className(因为class是JavaScript中的保留关键字,所以使用className属性) 2. 使用getAttribute()方法,传入属性名'class' 另外,引用[1]中提到了jQuery的方法,但用户要求使用JavaScript,所以不使用jQuery。 因此,我们可以这样实现: 首先,我们需要获取到该HTML元素。可以通过多种方式获取,比如通过id、标签名、类名等。这里假设我们通过id获取。 示例代码: 假设HTML中有一个元素:<div id="myDiv" class="example-class another-class">...</div> 方法1:使用className属性 var element = document.getElementById('myDiv'); var className = element.className; // 返回字符串 "example-class another-class" 方法2:使用getAttribute方法 var className = element.getAttribute('class'); // 同样返回字符串 "example-class another-class" 注意:className返回的是一个字符串,如果元素有多个类名,则它们以空格分隔。 另外,引用[4]也展示了如何获取元素并修改属性,其中获取元素使用了document.querySelector方法。 因此,我们可以根据实际情况选择获取元素的方法。 总结步骤: 1. 获取元素(例如通过id) 2. 使用element.className或element.getAttribute('class')获取class属性值 下面是一个完整的示例: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取class属性</title> </head> <body> <div id="myDiv" class="container main">这是一个示例div</div> <script> // 通过id获取元素 var divElement = document.getElementById('myDiv'); // 方法1: 使用className var className1 = divElement.className; console.log('方法1获取class:', className1); // 输出: "container main" // 方法2: 使用getAttribute var className2 = divElement.getAttribute('class'); console.log('方法2获取class:', className2); // 输出: "container main" </script> </body> </html> ``` 注意:在JavaScript中,class是保留字,因此不能直接使用element.class,而是使用element.className。但是,在getAttribute方法中,我们传入的是字符串'class',这是HTML属性名。 另外,现代浏览器还支持classList属性,它返回一个DOMTokenList对象,可以方便地操作类名(如添加、删除、切换等),但这里只是获取整个类名字符串,所以使用className或getAttribute即可。 如果用户需要获取单个类名或者操作类名,可以考虑使用classList,但问题只要求获取整个class属性值。 因此,我们提供上述两种方法。 相关问题: 1. 如何通过JavaScript修改HTML元素的class属性? 2. 如何使用JavaScript添加或删除HTML元素的类? 3. 如何通过类名获取多个HTML元素? 4. classList和className有什么区别?</think>要使用 JavaScript 获取 HTML 元素的 class 属性值,可以使用以下两种主要方法: ### 方法 1:使用 `className` 属性 ```javascript // 获取元素 const element = document.getElementById('myElement'); // 获取 class 属性值 const classValue = element.className; console.log(classValue); // 输出: "class1 class2" ``` ### 方法 2:使用 `getAttribute()` 方法 ```javascript // 获取元素 const element = document.querySelector('.my-class'); // 获取 class 属性值 const classValue = element.getAttribute('class'); console.log(classValue); // 输出: "class1 class2" ``` ### 完整示例: ```html <div id="myDiv" class="container main active">示例元素</div> <script> // 获取元素 const divElement = document.getElementById('myDiv'); // 方法 1 console.log(divElement.className); // 输出: "container main active" // 方法 2 console.log(divElement.getAttribute('class')); // 输出: "container main active" </script> ``` ### 说明: 1. **`className` 属性**:直接访问元素的 `className` 属性,返回包含所有类名的字符串(空格分隔)[^2][^4] 2. **`getAttribute()` 方法**:通用方法获取指定属性的值,传入 `'class'` 作为参数[^2] 3. 返回的类名字符串可以通过 `split(' ')` 转换为数组,方便操作单个类名 4. 现代开发中更推荐使用 `classList` API 进行类名操作(添加/删除/切换) > 注意:在 JavaScript 中访问 `class` 属性需使用 `className`,因为 `class` 是保留关键字[^2][^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值