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"
Todo JQuery
jueves, 3 de noviembre de 2011
martes, 1 de noviembre de 2011
Class Attribute
Estos métodos de jQuery permiten inspeccionar y manipular las clases CSS asignadas a los distintos elementos del DOM.
.addClass()
Permite agregarle una clase o varias clases CSS definidas a un elemento o conjunto de elementos coincidentes. Ejemplos
.hasClass()
Determina si un elemento encontrado o conjunto de elementos ya tienen asignada una determinada clase CSS.
.removeClass()
Permite quitar una clase o varias clases CSS definidas a un elemento o conjunto de elementos coincidentes.
.toggleClass()
Permite Agregar o eliminar una o más clases de cada elemento en el conjunto de los elementos coincidentes, ya sea en función de la presencia de la clase o del valor del argumento epecificado.
.addClass()
Permite agregarle una clase o varias clases CSS definidas a un elemento o conjunto de elementos coincidentes. Ejemplos
.hasClass()
Determina si un elemento encontrado o conjunto de elementos ya tienen asignada una determinada clase CSS.
.removeClass()
Permite quitar una clase o varias clases CSS definidas a un elemento o conjunto de elementos coincidentes.
.toggleClass()
Permite Agregar o eliminar una o más clases de cada elemento en el conjunto de los elementos coincidentes, ya sea en función de la presencia de la clase o del valor del argumento epecificado.
Suscribirse a:
Entradas (Atom)