18 Jul 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");
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")
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!
Entradas relacionadas:
Ejercicio jQuery en que se programa un telepronter horizontal (o antiguo efecto marquee). Incluye solución y explicación.
Ejercicio dónde se resuelve el típico caso de lista de la compra con jQuery. Incluye solución.
Tutorial paso a paso dónde explico como acoplar jQuery en un documento web. Se detallan también algunos errores típicos que no deberías cometer.
En esta entrada vemos como llamar nodos del DOM mediante jQuery haciendo la transición desde javascript. Vemos las similitudes y diferencies en Javascript y como podemos hacer la transición de JS a jQ...
Ejercicio jQuery en el que se pinta un tablero de ajedrez. Incluye dos soluciones. Una específica de jQuery y otra mezclando javascript puro.
Ejercicio jQuery en el que se plantea escribir un accordion. Incluye solución y explicación.
No Comments