Clase en html:
- La clase es un atributo que especifica uno o más nombres de clase para un elemento HTML.
- El atributo de clase se puede utilizar en cualquier elemento HTML.
- El nombre de clase puede ser utilizado por CSS y JavaScript para realizar ciertas tareas para elementos con el nombre de clase especificado.
Etiquetas compatibles: admite todos los elementos HTML.
Ejemplo :
html
<!DOCTYPE html>
<html>
<head>
<style>
.country {
background-color: black;
color: white;
padding: 8px;
}
</style>
</head>
<body>
<h2 class="country">CHINA</h2>
<p>China has the largest population
in the world.</p>
<h2 class="country">INDIA</h2>
<p>India has the second largest
population in the world.</p>
<h2 class="country">UNITED STATES</h2>
<p>United States has the third largest
population in the world.</p>
</body>
</html>
Producción:
Explicación: En el ejemplo anterior, CSS diseña todos los elementos con el nombre de clase «país».
Usando el atributo de clase en JavaScript: JavaScript puede acceder a elementos con un nombre de clase específico usando el método getElementsByClassName().
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
var x = document.getElementsByClassName("country");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</head>
<body>
<p>Click the button, and a JavaScript hides all
elements with the class name "country":</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="country">CHINA</h2>
<p>China has the largest population in the world.</p>
<h2 class="country">INDIA</h2>
<p>India has the second largest population in the world.</p>
<h2 class="country">UNITED STATES</h2>
<p>United States has the third largest population
in the world.</p>
</body>
</html>
Producción :
- Antes de hacer clic en el botón de ocultar elementos:
- Después de hacer clic en el botón ocultar elementos:
Uso de varias clases:
los elementos HTML pueden tener más de un nombre de clase, donde cada nombre de clase debe estar separado por un espacio.
Ejemplo:
html
<!DOCTYPE html>
<html>
<style>
.country {
background-color: black;
color: white;
padding: 10px;
}
.middle {
text-align: center;
}
</style>
<body>
<h2 class="country middle">CHINA</h2>
<h2 class="country">INDIA</h2>
<h2 class="country">UNITED STATES</h2>
</body>
</html>
Producción :
Explicación: Los tres encabezados tienen el nombre de clase «país», pero además de eso, CHINA también tiene el nombre de clase «medio», lo que hace que el texto esté alineado al centro.
Uso de la misma clase en diferentes etiquetas: diferentes etiquetas, como <h2> y <p>, pueden tener el mismo nombre de clase y, por lo tanto, compartir el mismo estilo.
Ejemplo:
html
<!DOCTYPE html>
<html>
<style>
.country {
background-color: black;
color: white;
padding: 10px;
}
</style>
<body>
<h2 class="country">CHINA</h2>
<p class="country">China has the largest
population in the world.</p>
</body>
</html>
Producción :
Explicación: incluso si los dos elementos no tienen el mismo nombre de etiqueta, pueden tener el mismo nombre de clase y obtener el mismo estilo.
Navegador compatible: el navegador compatible con el atributo Class se enumera a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Shubrodeep Banerjee y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA