检查元素是否包含JavaScript中的类？
问题描述 投票：431回答：23
使用纯JavaScript（不是jQuery），有没有办法检查一个元素是否包含一个类？
目前，我这样做：
var test = document.getElementById("test");
var testClass = test.className;
switch (testClass) {
case "class1":
test.innerHTML = "I have class1";
break;
case "class2":
test.innerHTML = "I have class2";
break;
case "class3":
test.innerHTML = "I have class3";
break;
case "class4":
test.innerHTML = "I have class4";
break;
default:
test.innerHTML = "";
}<div id="test" class="class1"></div>问题是，如果我将HTML更改为此...
<div id="test" class="class1 class5"></div>
...不再是完全匹配，所以我得到的是默认输出（""）。但我仍然希望输出为I have class1，因为<div>仍然包含.class1类。
23个回答
751
投票
投票
使用element.classList .contains方法：
element.classList.contains(class);
这适用于所有当前浏览器，并且有polyfill也支持旧版浏览器。
或者，如果您使用较旧的浏览器并且不想使用polyfill来修复它们，那么使用indexOf是正确的，但您必须稍微调整一下：
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}
否则，如果您要查找的班级是另一个班级名称的一部分，您也将获得true。
jQuery使用类似的（如果不是相同的）方法。
应用于示例：
由于这与switch语句不兼容，因此您可以使用以下代码实现相同的效果：
var test = document.getElementById("test"),
classes = ['class1', 'class2', 'class3', 'class4'];
test.innerHTML = "";
for(var i = 0, j = classes.length; i < j; i++) {
if(hasClass(test, classes[i])) {
test.innerHTML = "I have " + classes[i];
break;
}
}
它也不那么多余;）
2
投票
投票
这是一个不区分大小写的简单解决方案：
function hasClass(element, classNameToTestFor) {
var classNames = element.className.split(' ');
for (var i = 0; i < classNames.length; i++) {
if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) {
return true;
}
}
return false;
}
2
投票
投票
我已经创建了一个使用classList的原型方法，如果可能的话，还可以使用indexOf：
Element.prototype.hasClass = Element.prototype.hasClass ||
function(classArr){
var hasClass = 0,
className = this.getAttribute('class');
if( this == null || !classArr || !className ) return false;
if( !(classArr instanceof Array) )
classArr = classArr.split(' ');
for( var i in classArr )
// this.classList.contains(classArr[i]) // for modern browsers
if( className.split(classArr[i]).length > 1 )
hasClass++;
return hasClass == classArr.length;
};
///////////////////////////////
// TESTS (see browser's console when inspecting the output)
var elm1 = document.querySelector('p');
var elm2 = document.querySelector('b');
var elm3 = elm1.firstChild; // textNode
var elm4 = document.querySelector('text'); // SVG text
console.log( elm1, ' has class "a": ', elm1.hasClass('a') );
console.log( elm1, ' has class "b": ', elm1.hasClass('b') );
console.log( elm1, ' has class "c": ', elm1.hasClass('c') );
console.log( elm1, ' has class "d": ', elm1.hasClass('d') );
console.log( elm1, ' has class "a c": ', elm1.hasClass('a c') );
console.log( elm1, ' has class "a d": ', elm1.hasClass('a d') );
console.log( elm1, ' has class "": ', elm1.hasClass('') );
console.log( elm2, ' has class "a": ', elm2.hasClass('a') );
// console.log( elm3, ' has class "a": ', elm3.hasClass('a') );
console.log( elm4, ' has class "a": ', elm4.hasClass('a') );<p class='a b c'>This is a <b>test</b> string</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
<text x="10" y="20" class='a'>SVG Text Example</text>
</svg>Test page
2
投票
投票
Element.matches()
element.matches（selectorString）
据MDN Web Docs说：
如果元素将由指定的选择器字符串选择，则
Element.matches()方法返回true;否则，返回false。
因此，您可以使用Element.matches()来确定元素是否包含类。
const element = document.querySelector('#example');
console.log(element.matches('.foo')); // true<div id="example" class="foo bar"></div>1
投票
投票
- Felix的添加空格的技巧是侧翼className和你正在搜索的字符串是确定元素是否具有类的正确方法。
- 要根据类具有不同的行为，您可以在地图中使用函数引用或函数：
function fn1(element){ /* code for element with class1 */ } function fn2(element){ /* code for element with class2 */ } function fn2(element){ /* code for element with class3 */ } var fns={'class1': fn1, 'class2': fn2, 'class3': fn3}; for(var i in fns) { if(hasClass(test, i)) { fns[i](test); } }for（var in fns）遍历fns映射中的键。 在fnsi之后没有中断允许代码在匹配时执行 - 所以如果元素有，f.i。，class1和class2，则将执行fn1和fn2。 这种方法的优点是每个类执行的代码是任意的，就像switch语句中的代码一样;在您的示例中，所有案例都执行了类似的操作，但明天您可能需要为每个案例执行不同的操作。 您可以通过使用状态变量来判断是否在循环中找到匹配来模拟默认情况。
1
投票
投票
我认为完美的解决方案就是这样
if ($(this).hasClass("your_Class"))
alert("positive");
else
alert("Negative");
1
投票
投票
我会Poly填充classList功能并使用新语法。这种方式较新的浏览器将使用新的实现（速度更快），只有旧的浏览器才能从代码中获得性能。
1
投票
投票
如果元素只有一个类名，您可以通过获取class属性快速检查它。其他答案更加强大，但这肯定有它的用例。
if ( element.getAttribute('class') === 'classname' ) {
}
1
投票
投票
这有点偏，但如果你有一个触发开关的事件，你可以不用类：
<div id="classOne1"></div>
<div id="classOne2"></div>
<div id="classTwo3"></div>
你可以做
$('body').click( function() {
switch ( this.id.replace(/[0-9]/g, '') ) {
case 'classOne': this.innerHTML = "I have classOne"; break;
case 'classTwo': this.innerHTML = "I have classTwo"; break;
default: this.innerHTML = "";
}
});
.replace(/[0-9]/g, '')从id删除数字。
它有点hacky，但适用于没有额外功能或循环的长开关
1
投票
投票
如果元素具有使用vanilla JavaScript的特定类，请查看此Codepen链接，以便更快速，更轻松地检查元素！
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
0
投票
投票
试试这个：
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
84
投票
投票
简单有效的解决方案是尝试.contains方法。
test.classList.contains(testClass);
0
投票
投票
哪个元素当前是'.bar'类？这是另一种解决方案，但这取决于你。
var reg = /Image/g, // regexp for an image element
query = document.querySelector('.bar'); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string
if (query.match(reg)) { // checks if it matches
alert('the class .bar is attached to the following Element:\n' + query);
}
当然这只是一个简单的元素<img>（/Image/g）的查找，但你可以把所有数组像<li> /LI/g，<ul> = /UL/g等。
0
投票
投票
IE8 +支持此功能。
首先我们检查classList是否存在，如果它存在，我们可以使用IE10 +支持的contains方法。如果我们使用的是IE9或8，它会回退到使用正则表达式，这不是那么有效但是是一个简洁的polyfill。
if (el.classList)
el.classList.contains(className);
else
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
0
投票
投票
只是为那些试图在内联SVG元素中找到类名的人添加答案。
将hasCLass()函数更改为：
function hasClass(element, cls) {
return (' ' + element.getAttribute('class') + ' ').indexOf(' ' + cls + ' ') > -1;
}
您不需要使用className属性，而是需要使用getAttribute()方法来获取类名。
-1
投票
投票
对我来说，实现它的最优雅，更快捷的方法是：
function hasClass(el,cl){
return !!el.className && !!el.className.match(new RegExp('\\b('+cl+')\\b'));
}
40
投票
投票
在现代浏览器中，您可以使用contains的Element.classList方法：
testElement.classList.contains(className)
Demo
var testElement = document.getElementById('test');
console.log({
'main' : testElement.classList.contains('main'),
'cont' : testElement.classList.contains('cont'),
'content' : testElement.classList.contains('content'),
'main-cont' : testElement.classList.contains('main-cont'),
'main-content' : testElement.classList.contains('main-content')
});<div id="test" class="main main-content content"></div>Supported browsers
（来自CanIUse.com）
Polyfill
如果你想使用Element.classList但你也想支持旧的浏览器，可以考虑使用this polyfill的Eli Grey。
9
投票
投票
既然他想使用switch（），我很惊讶没人提出这个问题：
var test = document.getElementById("test");
var testClasses = test.className.split(" ");
test.innerHTML = "";
for(var i=0; i<testClasses.length; i++) {
switch(testClasses[i]) {
case "class1": test.innerHTML += "I have class1<br/>"; break;
case "class2": test.innerHTML += "I have class2<br/>"; break;
case "class3": test.innerHTML += "I have class3<br/>"; break;
case "class4": test.innerHTML += "I have class4<br/>"; break;
default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
}
}
6
投票
投票
这是一个小片段如果你试图检查元素是否包含一个类，而不使用jQuery。
function hasClass(element, className) {
return element.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(element.className);
}
这说明元素可能包含由空格分隔的多个类名。
要么
您还可以将此功能分配给元素原型。
Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};
并像这样触发它（非常类似于jQuery的.hasClass()函数）：
document.getElementById('MyDiv').hasClass('active');
5
投票
投票
简化的oneliner：1
function hasClassName(classname,id) {
return String ( ( document.getElementById(id)||{} ) .className )
.split(/\s/)
.indexOf(classname) >= 0;
}
IE（ofcourse）不支持1个indexOf用于数组。网上有很多猴子补丁。
5
投票
投票
这有点旧，但也许有人会发现我的解决方案很有帮助：
// Fix IE's indexOf Array
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement) {
if (this == null) throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) return -1;
var n = 0;
if (arguments.length > 0) {
n = Number(arguments[1]);
if (n != n) n = 0;
else if (n != 0 && n != Infinity && n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
if (n >= len) return -1;
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) if (k in t && t[k] === searchElement) return k;
return -1;
}
}
// add hasClass support
if (!Element.prototype.hasClass) {
Element.prototype.hasClass = function (classname) {
if (this == null) throw new TypeError();
return this.className.split(' ').indexOf(classname) === -1 ? false : true;
}
}
3
投票
投票
className只是一个字符串，因此您可以使用常规indexOf函数来查看类列表是否包含另一个字符串。
3
投票
投票
我知道有很多答案，但其中大部分都是针对其他功能和其他课程。这是我个人使用的那个;更清洁，更少的代码行！
if( document.body.className.match('category-page') ) {
console.log('yes');
}
最新问题
- 如何解决REST客户端响应“连接被拒绝”
- 有没有办法从 Google 表单的查看页面确定该表单编辑页面的 URL？
- Python 中从 1 到无穷大循环
- 无法从其他方法读取文件
- 我什么时候应该请求 Facebook 访问令牌？
- Facebook Open Graph 返回 false
- Tailwind css 过渡不适用于 Javascript
- 将字段从 json 对象移动到有条件的另一个对象
- Zephyr flash 项目错误 - west flash 命令失败
- BLAST+blastn fmt 输出 17 (sam) 格式不正确
- 如何在 Polars group_by 上下文中执行 if 和 else
- 如何根据django中ArrayField中的最后一个元素进行过滤
- 如何使用 Apache + Ratchet + SSL + Laravel 配置 WebSocket？
- 返回一个生成器作为返回值，生成器变空
- 使用 OpenCV 在图像中定位表格时遇到问题
- 警告：字段永远不会被分配，并且始终具有默认值 null
- 负时区的艾玛迪斯“按需航班状态”API 问题
- JPA AttributeConverter 使 hibernate 在事务中对整个表生成更新语句
- 当我收到未定义的 microsoft graph api 时，如何从 msal 浏览器获取代码
- YouTube Api v3：计算 YouTube 播放列表长度
© www.soinside.com 2019 - 2024. All rights reserved.