addClass es un método incorporado en jQuery que se usa para agregar más propiedades a cada elemento seleccionado. También se puede utilizar para cambiar la propiedad del elemento seleccionado. Este método se puede utilizar de dos maneras diferentes:
1) Agregando el nombre de la clase directamente:
aquí, el nombre de la clase se puede usar directamente con el elemento que se va a seleccionar.
Sintaxis:
$(selector).addClass(className);
Parámetros: Acepta un parámetro “className” que es el nombre de la clase que se va a agregar.
Valor devuelto: Devuelve los elementos seleccionados con nueva clase añadida.
Código #1:
<html>
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 35px;
}
.selected {
color: ;
display: block;
border: 2px solid green;
width: 160px;
height: 60px;
background-color: lightgreen;
padding: 20px;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<p>GeeksforGeeks</p>
<p>gfg</p>
<p>CSE</p>
<script>
$("p").last().addClass("selected");
</script>
</body>
</html>
En el código anterior, se selecciona el elemento «p» y la clase «seleccionada» se aplica solo en el último elemento «p» con la ayuda del método .last() y el método .addClass() de jQuery.
Producción:
2) Al pasar una función para agregar una nueva clase:
aquí, se puede pasar una función a .addClass() para el elemento seleccionado.
Sintaxis:
$(selector).addClass(function);
Parámetros: Acepta un parámetro “función”.
Valor devuelto: Devuelve el elemento seleccionado con función añadida.
Código #2:
<html>
<head>
<meta charset="utf-8">
<style>
div {
background: white;
margin: 20px;
}
.red {
background: red;
width: 300px;
margin: 20px;
}
.red.green {
background: lightgreen;
margin: 20px;
border: 2px solid green;
}
body {
border: 2px solid green;
width: 350px;
height: 200px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js">
</script>
</head>
<body>
<div>This div should be white</div>
<div class="red">This div will be green because now it
has the both "green" and "red" classes.
</div>
<div>This div should be white</div>
<script>
$("div").addClass(function(index, currentClass) {
var addedClass;
if (currentClass === "red") {
addedClass = "green";
$("p").text("There is one green div");
}
return addedClass;
});
</script>
</body>
</html>
En el código anterior, se selecciona el elemento «div» y, con la ayuda de una función, se agrega una nueva clase al elemento div seleccionado.
Producción:
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA