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"
})

[vc_custom_heading text=»Como se hace en jQuery» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]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");

[vc_custom_heading text=»Usando a $ pero instrucciones de Javascript» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]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")

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.

[vc_custom_heading text=»Como se hace en jQuery» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]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).[vc_custom_heading text=»Usando a $ pero instrucciones de Javascript» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]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!