Home / Questions / 280121
Accepted
Popularfan
Asked: 2020-07-20 03:09:39 +0800 CST 2020-07-20 03:09:39 +0800 CST

如何找出一个元素是否有一个类？

  • 772

我有这个元素：

<input id="Nombre" class="clase1 clase2 clase3" type="text" />

在 JavaScript 中，我可以得到这样的元素：

var item = document.getElementById("Nombre");

现在我怎么知道元素“item”是否包含类“clase2”

也就是说，我怎么知道一个元素是否有一个类？

javascript

4 Answers

  1. Best Answer

    您可以使用 (read-only) property classList，它返回一个字符串，其中不同的类由空格分隔（就像它们在您的 中一样HTML）：

    var item = document.getElementById("Nombre");
document.write( '<br>', item.classList );
    <p id="Nombre" class="clase1 clase2 clase3" >
Párrafo

    它有一些有用的方法，例如contains( )：

    var item = document.getElementById("Nombre");
var hasClase2 = item.classList.contains( 'clase2' );
document.write( '<br>', 'Tiene la clase "clase2": ', hasClase2 );
    <p id="Nombre" class="clase1 clase2 clase3">
Párrafo

    支持的方法列表：

    添加（字符串[，字符串]）

    添加指定的类。如果这些类存在于元素属性中，它们将被忽略。

    删除（字符串[，字符串]）

    删除指示的类。注意：删除不存在的类不会导致错误。

    项目编号）

    通过集合中的索引返回类的值。

    切换（字符串 [，力]）

    当只存在一个参数时：切换类的值；例如，如果该类存在，则将其删除并返回false，如果不存在，则添加它并返回true。
    当第二个参数存在时：如果第二个参数的计算结果为 true，则添加指定的类，如果计算结果为 false，则将其删除。

    包含（字符串）

    检查指定的类是否存在于元素的类属性中。

    替换（旧类，新类）

    用新的类替换现有的类。

    • 19

  2. 如果您想要根据元素是否具有类来创建条件，您可以非常快速地做到这一点：

    if (document.querySelector("#nombre.clase2")) {
  document.write("Esto solo se ejecuta si el elemento con id 'nombre' tiene la clase 'clase2'")
} else {
  document.write = "Se ejecuta si no la tiene"
}
    <input id="nombre" class="clase2">

    • 4

  3. 有几种方法可以查看元素的类，即使前面的答案都很好，但是如果您想在解决问题时扩展选项，这里有一些（尽管它们可能会与其他一些答案重复）。

    在 Javascript 中，.className您可以看到元素具有的所有类作为字符串。

    .className您可以参考 a ，.classList.value因为它们都提供一个字符串而不是一个数组，因为它本身就是一个数组.classList。

    var input = document.getElementById("Nombre");
// con .className obtienes todas las clases que pueda poseer un elemento
document.write(input.className);
    <input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>
Clases que posee:

    您可以以不同的方式使用.classList或.classList.value如我之前解释的那样

    请记住，.classList它只返回一个Array而不是String，它只返回.classList.value具有此属性的所有类的String 。

    var input = document.getElementById("Nombre"); document.write(input.classList)
    <input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>
Clases que posee:

    另一种选择是使用布尔.contains值来验证它是否具有正在搜索的类。

    当您将其与另一个属性结合使用时，此方法会返回其值（参见最后一个示例）

    var input = document.getElementById("Nombre"); document.write('Posee la clase "clase2":' + ' ' + input.classList.contains("clase2")); 
    <input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>

    您的另一个选择是使用上述属性的组合，例如：

    要查看它是如何工作的，请更改您要查找的类“clase2”

    此方法不起作用，.className因为这不是数组

    var input = document.getElementById("Nombre");
if (input.classList.contains("clase2")){  
document.write(input.classList + " " + "<br>" + "<b>Si posee la clase2</b>") } 
else { document.write(input.classList + "<br>" + "<b>No posee la clase que buscas") };
    <input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>
Clases que posee:

    • 2

  4. 如果您想使用元素的 this 属性，请给它焦点

         $("input[type=email],input[type=password],input[type=text]").focusout(function () {
         if (this.classList.contains("obligatorio")) {  
             console.log("el input tiene clase obligatorio")
         } else {
             console.log("el input tiene clase obligatorio")
             }

        });

    它对我有用，可以用类验证字段

    • 0