Blog
Agregar estilos CSS con jQuery
- Publicado por: admin
- Categoría: Blog css Java Script jQuery

Si nos encontramos desarrollando un sitio web bien dinámico es muy común tener que agregar estilos CSS con jQuery o Java Script sin librerías. Es por eso que en este tutorial aprenderemos a realizar dicha tarea un con un ejemplo muy sencillo.
¿Cómo agregar estilos CSS con jQuery?
Antes de comenzar tenemos que incluir la librería de jQuery en nuestro archivo de HTML. En nuestro caso vamos a cambiar el estilo de un cuadrado al oprimir distintos botones. La función principal de jQuery que utilizaremos para esta tarea es css() como podemos ver en el siguiente ejemplo:
<!DOCTYPE html> <html> <head> <title>Superponer divs en HTML usando CSS</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <style> #cuadrado{ background: red; width: 200px; height: 200px; } </style> </head> <body> <div id="cuadrado"> </div> <button onclick="cambiarColor();">Cambiar color</button> <button onclick="redondearBordes();">Redondear bordes</button> <button onclick="bordesNegros();">Bordes negros</button> <button onclick="agregarTransparencia();">Agregar transparencia</button> </body> <script> function cambiarColor(){ $('#cuadrado').css('background', 'blue'); } function redondearBordes(){ $('#cuadrado').css('border-radius', '25px'); } function bordesNegros(){ $('#cuadrado').css('border', '2px solid black'); } function agregarTransparencia(){ $('#cuadrado').css('opacity', '0.4'); } </script> </html>
Al visitar la página que hemos creado y oprimir los distintos botones se van a ejecutar las funciones de Java Script que cambiarán la estética del cuadrado.
Bueno gente, hemos llegado al final de este breve tutorial para agregar estilos CSS con jQuery, espero que les sea de gran utilidad y como digo siempre ante cualquier problema pueden dejar un comentario.