jQuery – CSS aplicar estilos a un elemento

Publicada el por

Una función muy potente para jQuery es css(). Con jQuery CSS podemos aplicar estilos a un elemento o capturar qué estilos tiene.

Con la función jquery CSS, podemos cambiar las propiedades CSS de un elemento de forma dinámica con jQuery. Fijaos en el siguiente ejemplo.

See the Pen jQuery – Aplicar estilo a un elemento by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Si pulsáis sobre el botón verde, veréis que cambian dos propiedades, background-color y color, de un div. Eso se realiza con la función css() de jQuery.

$("#mensaje").css("background-color", "#333");

Al elemento con ID mensaje, le asignamos a la propiedad ‘background-color’ el valor #333. Esto se hace al momento. Así pues, con jQuery podemos cambiar las propiedades CSS de un elemento.

Con el siguiente ejemplo, cambiamos el color de la fuente a negro. También podéis verlo en el CodePen anterior:

$("#mensaje").css("color", "#000");

Imaginad la potencia de la función que puede aplicar estilos tanto a elementos con una ID determinada como a elementos que tengan una clase aplicada. Por ejemplo:

$(".pares").css("color", "#000");

Todo elemento que tenga asignada la clase .pares, le cambiará el color de la fuente…

Con jQuery CSS podemos aplicar estilos a un elemento de forma fácil y rápida. Aquí os dejo el enlace a la API de la función:

API jQuery CSS()

https://api.jquery.com/css/