检查元素是否包含 JavaScript 中的类? [英] Check if an element contains a class in JavaScript?

问题描述

使用普通的 JavaScript(不是 jQuery)，有没有办法检查一个元素是否包含一个类?

目前，我正在这样做:

var test = document.getElementById("test");var testClass = test.className;开关(测试类){案例class1":test.innerHTML = "我有 class1";休息;案例class2":test.innerHTML = "我有 class2";休息;案例class3":test.innerHTML = "我有 class3";休息;案例class4":test.innerHTML = "我有 class4";休息;默认:test.innerHTML = "";}

<div id="test" class="class1"></div>

问题是，如果我将 HTML 更改为此...

...不再有精确匹配，所以我得到什么都没有的默认输出("").但我仍然希望输出是 I have class1 因为

仍然 contains .class1班级.

解决方案

使用 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"),类 = ['class1', 'class2', 'class3', 'class4'];test.innerHTML = "";for(var i = 0, j = classes.length; i < j; i++) {if(hasClass(test, classes[i])) {test.innerHTML = "我有"+ 类 [i];休息;}}

它也不那么多余;)

Using plain JavaScript (not jQuery), Is there any way to check if an element contains a class?

Currently, I'm doing this:

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>

The issue is that if I change the HTML to this...

<div id="test" class="class1 class5"></div>

...there's no longer an exact match, so I get the default output of nothing (""). But I still want the output to be I have class1 because the <div> still contains the .class1 class.

解决方案

Use element.classList .contains method:

element.classList.contains(class);

This works on all current browsers and there are polyfills to support older browsers too.

---

Alternatively, if you work with older browsers and don't want to use polyfills to fix them, using indexOf is correct, but you have to tweak it a little:

function hasClass(element, className) {
    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
}

Otherwise you will also get true if the class you are looking for is part of another class name.

DEMO

jQuery uses a similar (if not the same) method.

---

Applied to the example:

As this does not work together with the switch statement, you could achieve the same effect with this code:

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;
    }
}

It's also less redundant ;)

这篇关于检查元素是否包含 JavaScript 中的类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！