Modificar estilos CSS con Jquery

Cómo modificar estilos CSS con Jquery en una etiqueta HTML

Publicado en Jquery 2018-03-06 23:04:37

Modificar estilos CSS con Jquery

Manipular CSS con Jquery de forma dinámica

Diseño Web Jquery

Resumen: Jquery permite modificar los estilos de una etiqueta HTML con el método css(); tanto para un solo parámetro o varios, de forma dinámica.

A veces necesitamos manipular o alterar algunas de nuestras reglas definidas en la hoja de estilos CSS, ya sea cambiando los atributos de algunos elementos 

Digamos que en nuestro documento tenemos declarado ciertos atributos para nuestro “body”, vamos a ver como, mediante el uso de Jquery podemos modificar estas definiciones una vez hagamos click en el botón html. Este, quizás, sea uno de los métodos más intrusivos con nuestro código html ya que la función .css() de jQuery lo que hará será buscar todos los elementos con la clase apptivaweb de nuestra web y aplicar CSS con las reglas definidas, en este caso el color de fondo y el ancho del DIV

Veamos el código Jquery:

<!DOCTYPE html>
<html>
<head>	
	<title>Modificar estilos con Jquery | Apptivaweb</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 	
	<style>
		.apptivaweb{background: peru;	width: 500px;height: 500px;margin: 0 auto;}
	</style>
</head>
<body>
	<a href="#" id="btn">APLICAR NUEVOS ESTILOS</a>
	<hr>
	<div class="apptivaweb"></div>
	<script>
		$(document).ready(function() {
			var estilos = { "background": 'yellow', "width" : '200px' };
		    $("#btn").click(function(e){
		    	$(".apptivaweb").css(estilos);
		    })
		});
	</script>
</body>
</html>

 

Modificar estilos CSS con Jquery

El resultado podemos verlo en el siguiente video corto de menos de 03 minutos

Redacción:| Artículo leído: 769 veces | Publicación:


Compártelo con tus amigos


Publicaciones relacionadas de Jquery