A veces necesitamos comprobar que el elemento tiene el nombre de clase ‘ X’ (cualquier nombre específico). Para verificar si el elemento contiene un nombre de clase específico, podemos usar el método contains del objeto classList .
Sintaxis:
element.classList.contains("class-name")
Devuelve un valor booleano . Si el elemento contiene el nombre de la clase, devuelve verdadero ; de lo contrario, devuelve falso.
Implementación: Ahora implementemos el método dado. Aquí crearemos una página HTML simple y agregaremos un elemento h1 con el nombre de clase principal y el nombre de identificación principal. Nuestra tarea es encontrar el h1 que contiene el nombre de la clase main.
HTML
<!DOCTYPE html> <html> <body> <h1 id="main" class="main">Welcome To GFG</h1> </body> </html>
- Ahora crea una etiqueta de script y escribe el código javascript. Cree una variable llamada elem y almacene el elemento h1 usando document.getElementById( )
- Ahora verifique si el elemento tiene el nombre de clase principal y también verifique si el nombre de clase myClass está presente o no.
Javascript
let elem = document.getElementById("main");
let isMainPresent = elem.classList.contains("main");
if(isMainPresent){
console.log("Found the class name");
}else{
console.log("Not found the class name");
}
let isMyclassPresent = elem.classList.contains("myClass")
if(isMyClassPresent){
console.log("Found the class name");
}else{
console.log("Not found the class name");
}
Código completo:
HTML
<!DOCTYPE html>
<html>
<body>
<h1 id="main" class="main">Welcome To GFG</h1>
<script>
let elem = document.getElementById("main");
let isMainPresent = elem.classList.contains("main");
if (isMainPresent) {
console.log("Found the class name");
} else {
console.log("Not found the class name");
}
let isMyclassPresent =
elem.classList.contains("myClass")
if (isMyclassPresent) {
console.log("Found the class name");
} else {
console.log("Not found the class name");
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA