Aplicar estilos CSS con jQuery

En este tutorial vamos a ver como podemos aplicar estilos CSS a nuestra página HTML desde la librería jQuery.

Si queremos aplicar un estilo a algún elemento HTML mediante jQuery, tenemos tres posibilidades:

Como bien sabemos, podemos insertar código javascript de dos formas distintas, ya sea en línea mediante las etiquetas <script></script> o enlazando un archivo .js en la cabecera. Si elegimos la segunda opción, recomiendo encarecidamente tener una estructura y una jerarquía de directorios debidamente organizada.

A continuación vamos a ver un esquema de una estructura de archivos:

Copy to Clipboard

Debido a esto, tendremos todo organizado en directorios y subdirectorios y nos será más sencillo encontrar cualquier archivo.

En los siguientes ejemplos vamos a ver cómo podemos colocar un fondo rojo a la capa con id “textoejemplo”. Partiendo del siguiente archivo index.html, vamos a ver una a una cada una de las posibilidades.

¿Necesitas una impresora?

En este enlace encontrarás una selección de las mejores impresoras actuales

Ir a MejoresImpresoras.com

Copy to Clipboard

Posibilidad 1)

El archivo index.js será el siguiente:

Copy to Clipboard

Como podemos ver en la línea 2 del archivo index.js, estamos aplicando un estilo css desde jquery nada más cargue la página. Todo lo hemos realizado sin necesidad de ningún archivo css, solamente hemos hecho uso de javascript y jQuery. El resultado será que pondrá un fondo rojo al elemento que tengamos seleccionado con $, en este caso la capa con id textoejemplo.

En la siguiente imagen se puede ver el resultado.

Posibilidad 2)

El archivo index.js será el siguiente:

Copy to Clipboard

Igualmente que en la posibilidad 1, estamos aplicando estilos css directamente desde el archivo javascript index.js a través de la librería jQuery. En la línea 2 estamos haciendo uso de la función .attr() con la cual creamos un atributo style y le estamos dando un valor al mismo, en este caso background: red; para que ponga un fondo de color rojo al elemento seleccionado.

El resultado es el de la siguiente imagen, exactamente el mismo que el de la posibilidad 1.

Posibilidad 3)

Finalmente, en esta posibilidad vamos a atacar directamente al archivo CSS desde javascript con jQuery. Para ello necesitamos un archivo css del cual extraer las clases css.

El fichero index.css será el siguiente:

Copy to Clipboard

Para poder enlazar el archivo CSS a nuestro HTML tendremos que hacer referencia a index.css desde la cabecera.

Copy to Clipboard

Por ello, podemos ver en la línea 3, estamos enlazando el archivo index.css para poder acceder a la clase fondo-rojo.

Entonces, el archivo index.js quedará de la siguiente forma:

Copy to Clipboard

Por lo tanto, podemos ver cómo en la línea 2 del archivo index.js estamos utilizando la función .addClass() para añadir una clase al elemento que hayamos pasado como parámetro, en este caso la capa textoejemplo.

El resultado, como en la posibilidad 1 y la posibilidad 2, será la aplicación de un fondo rojo al texto “Esto es una capa”.

Con las tres posibilidades obtendremos el mismo resultado pero de formas distintas.

Finalmente, os dejo con los enlaces de descarga de cada uno de los ejemplos así como las demos.

4.8 (95.14%) 37 votes

2020-10-09T09:28:55+00:00