En este artículo, aprenderemos cómo agregar la propiedad de nombre de clase al elemento, además de comprender la implementación a través del ejemplo. El atributo de nombre de clase puede ser utilizado por CSS y JavaScript para realizar ciertas tareas para elementos con el nombre de clase especificado. Agregar el nombre de la clase mediante JavaScript se puede hacer de muchas maneras.
Usando . Propiedad className : esta propiedad se utiliza para agregar un nombre de clase al elemento seleccionado.
Sintaxis:
Se utiliza para establecer la propiedad className.
element.className += "newClass";
Se utiliza para devolver la propiedad className.
element.className;
El valor de la propiedad:
- newClass : Especifica el nombre de la clase del elemento. Para aplicar múltiples clases, necesita separar por espacio.
Valor devuelto: Es de tipo string que representa la clase o lista de clases de elementos separados por espacios.
Ejemplo: este ejemplo usa la propiedad .className para agregar un nombre de clase.
HTML
<!DOCTYPE html>
<html>
<head>
<title>JavaScript to add class name</title>
<style>
.addCSS {
color: green;
font-size: 25px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="p"> A Computer Science portal for Geeks. </p>
<button onclick="addClass()"> AddClass </button>
<!-- Script to add class name -->
<script>
function addClass() {
var v = document.getElementById("p");
v.className += "addCSS";
}
</script>
</body>
</html>
Producción:
Propiedad .className
Usando el método .add() : este método se usa para agregar un nombre de clase al elemento seleccionado.
Sintaxis:
element.classList.add("newClass");
Ejemplo: Este ejemplo usa el método .add() para agregar el nombre de la clase.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.addCSS {
background-color: green;
color: white;
padding: 20px;
font-size: 25px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="p"> A Computer Science portal for Geeks. </p>
<button onclick="addClass()"> AddClass </button>
<!-- Script to add class name -->
<script>
function addClass() {
var elem = document.getElementById("p");
elem.classList.add("addCSS");
}
</script>
</body>
</html>
Producción:
Método .add()
Navegador compatible:
- Google Chrome 22.0
- Microsoft Edge 12.0
- Internet Explorer 5.0
- Firefox 1.0
- Ópera 8.0
- Safari 1.0
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA