jQuery: Cómo aplicar estilo CSS a un elemento

abril 12, 2014 | 1 Comments | CSS, jQuery

Con jQuery es muy fácil aplicar estilos css a los elementos que queramos dinamicamente, una vez ya se ha cargado nuestro sitio web.

Veámoslo con un ejemeplo. Supongamos que tenemos el siguiente código html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris varius ligula vel iaculis ullamcorper. 
</p>

</body>
</html>

El código jQuery

Para aplicar un estilo css al parágrafo “p”, solo debemos añadir este código javascript antes del cierre de </body>:

<script>
  	$("p").css({
		"background-color": "black",
		"color": "red",
		"padding": "5px" /* la última linia sin coma */
	});
</script>

Evidentemente, podemos añadir cualquier tipo estilo CSS (color, margin, padding, etc…)

Más información de la librería jQuery aquí.

¿Te ha parecido útil este truco? Coméntalo:


One Comment

  1. Posted by William on

    Excelente, me ayudaste mucho.


Deja un comentario

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

dieciocho − uno =

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>