jQuery

Agregar estilos CSS con 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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *