检查元素是否有类的最佳方法是什么
What is the best way to check if element has a class?
问题
如果元素有多个类,那么它与常规属性值检查不匹配,所以我正在寻找检查对象在元素的 className 属性中是否具有特定类的最佳方法。
例
// element's classname is 'hello world helloworld'
var element = document.getElementById('element');
// this obviously fails
if(element.className == 'hello'){ ... }
// this is not good if the className is just 'helloworld' because it will match
if(element.className.indexOf('hello') != -1){ ... }
那么最好的方法是什么呢?
请只是纯粹的JavaScript
function hasClass( elem, klass ) {
return (" " + elem.className + " " ).indexOf( " "+klass+" " ) > -1;
}
在现代浏览器中,您可以使用classList:
if (element.classList.contains("hello")) {
// do something
}
在不实现classList
但公开 DOM 原型的浏览器中,您可以使用链接中显示的填充程序。
否则,您可以使用同一填充码的代码来拥有泛型函数,而无需操作原型。
这个
2018年使用ES6
const hasClass = (el, className) => el.classList.contains(className);
如何使用
hasClass(document.querySelector('div.active'), 'active'); // true
你要求纯javascript,所以jQuery是这样实现它的:
hasClass: function( selector ) {
var className = " " + selector + " ",
i = 0,
l = this.length;
for ( ; i < l; i++ ) {
if ( this[i].nodeType === 1 && (" " + this[i].className + " ").replace(rclass, " ").indexOf( className ) > -1 ) {
return true;
}
}
return false;
},
rclass
是['n't'r]
的正则表达式,以确保分隔类名的替代方法不是问题。 this
将是jQuery对对象的引用,从某种意义上说,它使代码比所需的更复杂,但是在不知道它的细节的情况下它应该是有意义的。
这应该适合您:
var a = [];
function getElementsByClassName(classname, node) {
if(!node) node = document.getElementsByTagName("body")[0];
var re = new RegExp('''b' + classname + '''b');
var els = node.getElementsByTagName("*");
for(var i=0, j=els.length; i<j; i++)
if(re.test(els[i].className)) a.push(els[i]);
return a;
}
getElementsByClassName('wrapper');
for (var i=0; i< a.length; i++) {
console.log(a[i].className);
}
此代码将遍历 DOM 并搜索在 main 函数中定义为参数的类。然后它将使用正则表达式模式测试每个建立的类元素。如果找到,将推送到数组,并将输出结果。
首先,使用 " " 字符拆分类名,然后检查要查找的类的索引。
function hasClass(element, clazz) {
return element.className.split(" ").indexOf(clazz) > -1;
}
相关文章:
- 有条件更新d3.js力图中节点的最佳方法
- 将jQuery.ech()方法转换为本地JavaScript抽象的最佳方法是什么
- 处理浮点错误的最佳方法是什么
- 从数组中删除元素的最佳方法是:javascript/jquery
- 以编程方式填充组合框道场 (1.8) 的最佳方法是什么?
- 列出没有 mysql 的元素的最佳方法是什么
- 在jquery库中重新定义方法的最佳方法
- Javascript,用vars创建对象的最佳方法
- 使用 jQuery 从 HTML 中获取某些值的最佳方法
- 在变量中保存值的最佳方法是在应用程序关闭后使用,然后使用apachecordova在android中重新启动
- 在d3.json中使用d3.csv组合多个csv文件数据输入的最佳方法是什么
- 用jasmine测试JavaScriptUI的最佳方法
- 使用javascript:在没有阻止html标记(<b>、<p>等)的情况下,阻止脚本的最佳方法
- 如果我返回表,检查 Ajax 调用是否为 200 OK的最佳方法是什么
- JavaScript - 创建可链接函数时的最佳方法是什么
- 在上下文菜单项单击上显示侧边栏/弹出窗口的最佳方法是什么
- 在 JavaScript 中获取范围的随机数的最佳方法
- 在对象类上实现 jquery 作用域的最佳方法
- 将同步函数包装到承诺中的最佳方法是什么?
- 使用 MVC 删除 JavaScript 中硬编码字符串 Asp.Net 最佳方法