Consultar, modificar, insertar, eliminar el css de un nodo web con jQuery

Consultar, modificar, insertar, eliminar el css de un nodo web con jQuery

En una primera entrada hemos aprendido a consultar y modificar el html de un nodo con jquery.

En esta entrada veremos como modificar el css y lo compararemos con javascript.

Consultar css de un elemento web

Consultar el css de un nodo web es un ejercicio didáctico que nos facilita la comprensión posterior.

Dado el siguiente html:

<p class="parrafo-1">soy el párrafo 1</p>
<p class="parrafo-2">soy el párrafo 2</p>
<p class="parrafo-3">soy el párrafo 3</p>
<p class="parrafo-4">soy el párrafo 4</p>
<p class="parrafo-5">soy el párrafo 5</p>
<p class="parrafo-6">soy el párrafo 6</p>

Y el siguiente jQuery:

var parrafos = $("p");

parrafos.css({
	"color":"blue",
	"padding":"20px",
	"margin-top":"20px",
	"border":"1px solid #000"
})

Como se hace en jQuery

Veamos el resultado por la consola del navegador de la siguiente expresión:

//JQuery

parrafos.css("color");

//podemos usar con y sin guión.
parrafos.css("fontSize");
parrafos.css("font-size");

//preguntar el nodo que ocupa la tercera posición.
parrafos.eq(2).css("font-size");
consulta css mediante jquery
consulta css mediante jquery

Usando a $ pero instrucciones de Javascript

Veamos el resultado por la consola del navegador de la siguiente expresión:

//Equivalente en JS y jQ

parrafos[1].style.fontSize
parrafos.eq(1).css("fontSize")

parrafos[2].style.color
parrafos.eq(2).css("color")
Consultar, modificar, insertar, eliminar el css de un nodo web con jQuery 1
Comparación entre consulta css entre jquery y equivalente javascript

Para devolver el valor de una propiedad en jQuery es suficiente con meter el nombre de la propiedad dentro del paréntesis. Puede ir con guión o sin guión.

En Javascript hay ocasiones en las que no obtenemos información. En jQuery la tenemos siempre.

jQuery nos ha devuelto el color en rgb mientras que javascript nos ha indicado el valor indicado exactamente en el css.

Modificar, insertar, eliminar css

Para modificar el css de un nodo la nomenclatura cambia un poco.

Se pueden dar dos casos:

  • Que deseemos modificar una única propiedad por instrucción.
  • Que modifiquemos varias propiedades css a la vez.

Como se hace en jQuery

Para modificar propiedades de una en una escribiremos:

//de una en una
parrafos.css("color","blue");
parrafos.css("padding","20px");
parrafos.css("margin","20px");

Para modificar todas a la vez escribiremos:

//varias a la vez
parrafos.css({
	"color":"blue",
	"padding":"20px",
	"margin-top":"20px",
	"border":"1px solid #000"
})

Fijaros que en el caso de todo el css en una única instrucción se usa la nomenclatura de una variable de tipo objeto y que todos los campos son de tipo string.

Muy importante, las informaciones separan con coma (,) excepto el último (border).

Usando a $ pero instrucciones de Javascript

jQuery nos permite modificar todos los párrafos al mismo tiempo.

Sin embargo en javascript debíamos ir de párrafo en párrafo.

for (var i = 0; i < parrafos.length; i++) {
	parrafos[i].style.color = "blue";
	parrafos[i].style.padding = "20px";
	parrafos[i].style.marginTop = "20px";
	parrafos[i].style.border = "1px solid #000";
}

A mi modo de ver un ejemplo poco práctico pero útil académicamente.

Fijaros que una de las ventajas de jQuery es que por ejemplo no debemos preocuparnos por si definimos un estilo en hexadecimal, rgb, nombres seguros… funcionará siempre para todos los navegadores.

jQuery permite ahorrar muchas líneas de código y complejidad.

Sin embargo, una vez más incidir en que aprender javascript es imprescindible.

Resistir la tentación de usar jQuery si todavía no domináis como se escribe en Javascript puro.

¡Hola!

Querido lector,

Deseo que esta publicación te resulte de utilidad para no liarte entre javascript y jquery.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.