Este método permite agregar una clase CSS a un elemento o conjunto de elementos del DOM. Agregar una clase significa asignar atributos CSS previamente definidos en la sección <STYLE></STYLE> o en una hoja de estilos CSS incluida en nuestro documento HTML.
Supongamos la siguiente línea de código HTML:
<p>Este texto no contiene estilos CSS</p>
Supongamos la siguiente definición de estilos CSS:
<style>
.miparrafo{ color:blue; font-size:16px; }
</style>
En un determinado momento de ejecución o evento podríamos cambiar los estilos de este párrafo agregándole la clase miparrafo:
<script>
$("p").addClass("miparrafo");
</script>
De este modo nuestro código HTML cambiará a:
<p class="miparrafo">Este texto no contiene estilos CSS</p>
¿Qué ocurre si nuestro párrafo ya tiene asignada una clase CSS?
Supongamos ahora la siguiente línea de código HTML:
<p class="parrafo">Este texto contiene estilos CSS</p>
Supongamos la siguiente definición de estilos CSS:
<style>
.parrafo{ font-family:verdana; }
.miparrafo{ color:blue; font-size:16px; }
</style>
En un determinado momento de ejecución o evento podríamos cambiar los estilos de este párrafo agregándole la clase miparrafo:
<script>
$(".parrafo").addClass("miparrafo");
</script>
De este modo nuestro código HTML cambiará a:
<p class="parrafo miparrafo">Este texto no contiene estilos CSS</p>
Cabe aclarar que addClass() me permite agregar más de una clase a la vez, haciendo la llamada de la siguiente manera:
<script>
$("p").addClass("parrafo miparrafo ");
</script>
donde parrafo y miparrafo son dos clases CSS previemente definidas
Para utilizar addClass al momento de efectuarse un evento, por ejemplo "click", podría utilizar una función como la que sigue:
<script>
$("p").click(function () {
$("p").addClass("miclase");
});
</script>
De esta manera, al hacer click sobre el párrafo este recibirá los atributos CSS de la clase "mi clase"
No hay comentarios:
Publicar un comentario