Curso JavaScript: 64. DOM: Estilos y Variables CSS -

[@edixonserrano9871]

Importante tener en cuenta que con la propiedad style del elemento no podremos acceder a propiedades declaradas en una hoja de estilos externa al documento HTML, solamente podremos acceder a los estilos declarados dentro del atributo style del elemento, si queremos consultar propiedades establecidas desde la hoja de estilos externa debemos usar getComputedStyle

[@jonmircha]

🤓

[@gabrielcastillo1454]

Gracias por la aclaración Edixon

[@PROGAMERXable]

Ojala lo haya explicado en el curso, sino, a investigar 😢, suerte a todos!!!!

[@lilzupa1661]

Gracias por el contenido! La razón por la que en el minuto 25:45 no cambia el background es porque al body se le debe pasar como background la variable css y no la variable js. Quedaría asi: $body.style.setProperty('background-color', 'var(--dark-color)'); ó en el CSS: body{ background-color: var(--dark-color); } Así conseguimos que con la siguiente linea de código el color cambie dinamicamente: $html.style.setProperty('--dark-color', '#000');

[@paelsam]

Muchas gracias, sentia que el codigo que estaba haciendo el profe Jon se podría optimizar, lo hiciste perfectamente.

[@ronaldm.r]

Comento demasiado jajaja, pero hay que decirlo, este curso de JS habrá que buscarle competencia de alto level, no hay forma! el mejor curso de js en habla hispana en menos de una semana me he tirado ya unos 64 videos y esta curiosidad sigue incentivada, con todo lo que se puede manejar en base al objeto windows se me subió el hype de una forma increíble mil gracias!! @jonmircha

[@Juankybi]

estoy de acuerdo, y no eres pesado cuando dices algo evidente y que necesita de mimos, para que nuestro amigo John se enorgullezca de su gran labor

[@eduardorodriguez3266]

no me canso de decirlo este es el mejor Curso de Javascript .

[@mcr3421]

Confirmo

[@arturorodriguez3110]

me encanta que le dediques clases enteras para explicar cada cualidad de un tema. es importante. muchos las veen rapidamente y no se termina de entender a fondo. saludos desde Argentina! excelentes videos

[@jonmircha]

Gracias, comparte para llegar a más gente ;)

[@Ni_idea_de_tecnologia]

He tenido que ver un par de veces el video pero al final creo que con un poco de práctica la cosa irá yendo mejor. Gracias Sr. Mircha

[@jonmircha]

👋🏻😉

[@samz4k980]

Ya terminados los cursos de HTML, CSS, Flexbox y Grid y hecho el ejercicio de Bootstrap, regreso al curso donde empecé para aprender sobre el DOM. Muchas gracias, Jonmircha, de verdad. El esfuerzo que ha de ser hacernos llegar todos estos cursos es admirable. Simplemente, gracias.

[@jonmircha]

👋🏻😉

[@carlosjavierorozco8418]

Me enrede un poco con lo de las variables CSS. Es cuestión de practicarlos mas lo tengo como tarea. Gracias muy practica la clase

[@jonmircha]

👋🏻😉

[@samuelPerez-ks1oc]

Muchas gracias profesor cada video vale oro 🙏

[@jonmircha]

👋🏻😉

[@Wiiiiizard]

🧙‍♂Muchas gracias, muy buen curso!!!

[@jonmircha]

Gracias a ti!

[@johnherrera5913]

Eres un máster de la programación

[@jonmircha]

🙈🙌🏻

[@nachosanabria6942]

sept 11 1969**Nov 10 2023 gracias excelente curso felicidades John Mircha

[@jonmircha]

👋🏻😉

[@dvesc]

@jonmircha después de un día ajetreado (me la pase toda la tarde literalmente buscando información y haciendo anotaciones sobre CSS y sus variables, haciendo uso de las mismas desde CSS con la función var() y luego la noche analizando este vídeo, haciendo pruebas, mas anotaciones etc, etc) logre hasta ahora 11:16 pm ENTENDER TODO LO QUE DICES Y HACES EN EL VIDEOOOO, en verdad lo entendí todo muy bien :D, ahora me acostare con ojeras pero con la cabeza a reventar de información :3

[@jonmircha]

;)

[@SebastianEPH]

Definitivamente el mejor curso que js, mejor explicado que esto no hay.

[@albertodiaz3852]

Gratis si, pero pago en Udemy en javascript modenor de Juan Pablo de la torre es brutal

[@danielfabiani4468]

Buenas tardes, gracias por tu aporte.

[@jonmircha]

👋🏻😉

[@jeisongarzon6066]

Despues de ver el video por segunda vez, lo entendi perfectamente. Gracias profe por hacer los videos amenos y entendibles.

[@jonmircha]

Con mucho gusto

[@edgarzambrano3505]

profe su forma de ser es genial me divierto viendo sus videos y de paso aprendiendo, posdata su comercial en este video es muy divertido jajaja

[@jonmircha]

😉👌🏻

[@marceloroberto5716]

Excelentes videos, JavaScript puro, nada de frameworks ni cosas por el estilo explica bien los fundamentos y cosas avanzadas de este maravilloso lenguaje

[@jonmircha]

Comparte para llegar a más personas :)

[@williamalexanderpineda6098]

Muchas gracias maestro!

[@jbaptista960]

saludos! te sigo desde bextlan! gracias a tu contenido me ha ido muy bien, me alegro que vuelvas

[@jonmircha]

Que bien, comparte para llegar a más gente :)

[@jaimealonsoprietopalomar6349]

Muy interesante conocer el manejo y el xq' del comportamiento de los elementos ante cambios de sus style properties, aunque esto sea tedioso

[@jonmircha]

😉👋🏻

[@dan_seb]

Hay que comentar lo que sea para ayudar a que este curso sea posicionado como lo merece!!

[@jonmircha]

🤓🙌

[@instintoimagen]

Vamos @jonmircha !!! Excelente curso de javascript Muy buena didáctica y bien explicado

[@jonmircha]

Muchas gracias!

[@hectormunozmorales5827]

Con cada clase me mareo más, pero vaya que se aprende. Se nota que los ejercicios van a estar buenazos! :D

[@jonmircha]

;)

[@carlesbautista8293]

Muy bien explicado Jonathan, me gusta muchisimo el echo como se va relacionando todo, asi puedes hacer que la pagina cambie de color al cabo de un tiempo con un setTimeout, o con una accion del usuario al pulsar un boton, etc. Me esta gustando muchisimo este curso, mil gracias!!!!

[@jonmircha]

Excelente :)

[@chambers4222]

Muy bien explicado, siempre me habia costado entender este tema, muchisimas gracias por tu aporte, ya estoy compartiendo tu canal 😊

[@jonmircha]

Gracias, saludos

[@unciudadanoejemplar816]

uuf hoy aprendí mucho con este video😃😃😃😃 gracias!!!.

[@jonmircha]

Excelente!

[@manuelrosen2752]

Lo entendí a la perfección, gracias Mircha

[@jonmircha]

Excelente!

[@tongastonga22]

Gracias Jon!!

[@jonmircha]

Un saludo!

[@jebusxuy]

Jon, de verdad muchas gracias por tus vídeos, estoy comprendiendo un montón de cosas, que no aprendí o nunca vi en mis años de ingeniería. Como una observación, el panel de propiedades, en los navegadores basados en chromium, está deprecado, pero se pueden obtener las propiedades, la información se debe obtener con la consola.

[@ruizdaiana1184]

Sin dudas este es el mejor curso de JavaScript, gracias Jon

[@jonmircha]

Gracias :)

[@nachosanabria6942]

gracias excelente video

[@jonmircha]

😉👋🏻

[@josemarianzerpamorales2300]

Excelente!

[@jonmircha]

👋🏻😉

[@fadelsalem4172]

Muchas gracias por el buen curso. Tambien se puede mostrar todas la propiedades con Show all en compted. Un saludo

[@jonatangarcia2668]

me gustó esta parte 30:22 jajá déjame decirte, que si estalló buen video @jonmircha!

[@jonmircha]

🤯 jejejeje

[@r.w.s.2402]

Buenísimo este vídeo. Genial explicación:)

[@jonmircha]

Muchas gracias! 😊

[@timawid]

Entendí muy bien 🤩🤩👏

[@jonmircha]

👋🏻😉

[@albertsanfle5030]

en verdad uso scss me lo siento mas Comodo que tener que usar tanto puntos como con el css , Muy bien video profe

[@jonmircha]

👋🏻😉

[@leonardoprone5967]

Bien Jon !

[@jonmircha]

😉👍🏻

[@gonzaloalonsorodriguez4929]

Muy interesante, en lo personal lo habría preferido todo con un método y luego ver los otros, antes que ver todos los métodos y mezclarlo todo en las modificaciones, se me hace algo caótico Igualmente gracias por tu esfuerzo, eres un crack.

[@jonmircha]

Aquí te doy las opciones, te toca a ti ponerlas en práctica ;)

[@paulpaucarb]

Gracias

[@jonmircha]

👋🏻😃

[@Anthony_Ger1996]

Mi cerebro exploto jajajaja pero para eso puedo verlo un par de veces mas hasta entenderlo, saludo jon y gracias por todo hasta ahora :D

[@jonmircha]

jejeje de nada ;)

[@edwinroman30]

Eres el mejor.

[@DiegoGonzalez-ju2xh]

Pum comercial jajaja Me esta gustando mucho esta parte del dom... Mircha por excelencia.

[@jonmircha]

😎👌

[@kunjilee9810]

Buen video profe! , tengo una duda , en este video accediste al style y a las variables css desde el html , pero como hariamos todo lo que hiciste , de cambiarle el color y asi , con un archivo css normal, ejemplo style.css , como accederiamos a las variables????

[@jonmircha]

De la misma forma mientras la hoja este linkeada al html no tenemos problemas en acceder

[@matiastorres5993]

hola jon! disculpa..no se si me perdi algo..pero me podrias explicar porque en la linea 126 usas const y en la 127 no? y luego igual en la linea 129 y 130.

[@jonmircha]

en que parte

[@osakadev]

getComputedStyle devuelve un objeto que representa los estilos computados de un elemento. Los estilos computados son el resultado de la cascada de estilos CSS, que incluye los estilos en línea, los estilos definidos en hojas de estilo externas y los estilos heredados de elementos padres Por si les quedó una duda

[@jonmircha]

👋🏻😉

[@facundogutierrez1132]

Hola Jon pregunto, no entendi bien la ultima parte, no era mas simple directamente poner $body.style.setProperty("background-color",pink) ...asi sin las 2 lineas de arriba? no me quedo muy claro eso. Saludos.

[@jonmircha]

Ups hace rato que grabe el video no me acuerdo muy bien lo que hice :P

[@DanielLozadaDev]

Jon: espero no les haya estallado mucho la cabeza... nosotros: 🤯

[@jonmircha]

🤪

[@matiasromera330]

todavía no puedo limpiar el techo de mi casa con los pedazos de mi cerebro

[@carlosgarcia7200]

me exploto el cerebro

[@eratoale]

¿Cómo pasas a través del DOM una variable CSS de un archivo externo (styles.css) para usarla dinámicamente con JavaScript?

[@jonmircha]

con getComputedStyle y .getPropertyValue

[@eratoale]

@@jonmircha Gracias Jon, eres muy amable en contestar. Te felicito por ser un excelente profesor. Tomé cursos en Bextlan.

[@josedaniel3316]

Para cambiar el color de fondo tambien puede ser darkColor = $html.style.backgroundColor = 'pink' $body.style.setProperty('background-color',darkColor) eso seria lo mismo que hiciste tu en el video ?? No entendi muy bien para que sirve el getComputedStyle ):

[@jonmircha]

👍🏻

[@user87546]

Segun entendi, getComputedStyle te da el valor como es interpretado por el navegador. Por ejemplo cuando él en una propiedad de width creo que era le pone 3 rem, al verlo en la consola salia expresado en px.

[@josecamilorodriguezvera8029]

Hola jon... hice directamente esto: $body.style.setProperty('background-color', 'pink'); y si cambió es decir me salté los 2 pasos anteriores... eso está bien??? o necesariamente debo hacerlo como en el video???

[@jonmircha]

Recuerda que en programación siempre hay diferentes formas de llegar al mismo resultado ;)

[@josecamilorodriguezvera8029]

@@jonmircha Gracias

[@RNJB007]

Hola jon una pregunta: ¿para cambiar a Pink es obligatorio dar todos esos pasos atraves de la var $html o se podría aplicar el setProperty directamente a $body o mejor aún directamente a varDarkColor?

[@jonmircha]

Todas son opciones viables, este video tiene la intensión de mostrarte todas las formas, elige la que más te agrade :)

[@RNJB007]

jonmircha ok gracias por tu ayuda eres un crack

[@yovanyescobarrojas2041]

profe una duda ,no seria mas fácil crear las propiedades en css por ejemplo en una clase :.{ color:'red' etc} "y despues agregarlas js , y no colocar el css plano

[@jonmircha]

Sí pero recuerda que aveces vas a tener que aplicar estilos dinámicamente, para eso sirve todo eso, más adelante lo entenderás en los ejercicios del DOM

[@ivantg4572]

amigo ya que hablas de flexbox no tienes un curso de css grid?

[@jonmircha]

Tengo de los dos jonmircha.com/cursos

[@eratoale]

Hola Jon ¿Cómo llamas una variable CSS al HTML si está en un archivo externo styles.css?

[@ricksanchez-mm9ei]

seria igual

[@tomassteven1]

pregunta, cual es la diferencia de cambiar el style de la mano de javascript que de cambiarlo desde el css o la etiqueta del html?

[@jonmircha]

Cuando el estilo dependa de una decisión interactiva, ahí es cuando entra JS

[@kevinnunez8490]

Estado del paciente: Casi el cerebro abandona el plano terrenal, pero animado de querer seguir.

[@jonmircha]

🫢😉👋🏻

[@heimancastro1954]

😀😀😀😀😀😀😀😀

[@jonmircha]

😉

[@David-tt5jk]

2:50 yo vengo desde flexbox! Jaja

[@jonmircha]

👋🏻😉

[@edersuca8259]

Buenas Jon, una consulta, cuando hago cambios al html mediante javascript, agregandole clases, inicialmente la pagina se muestra sin estilos, y tiene un pequenio retraso hasta que le aplica los estilos con js, como puedo evitar eso, muchas gracias por tanto.

[@jonmircha]

Espera a que llegas al tema de los eventos y al DOMContentLoaded ;)

[@helipalacio8772]

👏👏👏🙏🙏🙏.

[@jonmircha]

👋🏻😉

[@matiastorres5993]

jon me acabo de dar cuenta que en la clase nro 68 que estas creando varias variables const usando una coma y así no repetir const en cada linea.

[@abrahamandrade]

JON.... me apena preguntar esto, PERO: cual es la diferencia de uso entre: getPropertyValue VS getAttribute Por que veo que lo usas en similares casos.

[@jonmircha]

La primera sirve para obtener el valor de una propiedad CSS del atributo style, la segunda para obtener el valor de cualquier atributo HTML

[@braianrico4422]

🧙‍♂️🧙‍♂️🧙‍♂️

[@jonmircha]

🧙‍♂️

[@dvesc]

ALV como que tendré que hacer una pausa con este curso y empezar uno completo de CSS para entender bien esto XDXDXDXDXD

[@jonmircha]

Puedes ver mi curso de FLexbox :) kzbin.info/aero/PLvq-jIkSeTUbQc3dGsssp8lxAi5npMrys

[@eduardorodriguez3266]

no seria mejor utilizar Css puro en vez de interactuar con js? yo pienso que la interacción con el Dom seria para animaciones y cambio de estados entre elementos. ¿Cómo serian las buenas practicas? 🤨☺

[@jonmircha]

A veces es necesario hacerlo con JS, cuando llegues a las clases de ejercicios lo entenderás

[@vegaimagen9075]

Gracias Jon, una pregunta espero no sea tan tonta la duda que tengo despues de estallar mi cabeza jaja las variables en css en js solo pueden declararse usando :root?

[@jonmircha]

NO, puedes declarar variables en cualquier selector

[@vegaimagen9075]

@@jonmircha Gracias jon

[@everything-do9si]

Entonces es mejor usar la notación del punto que las funciones?

[@jonmircha]

ambas, la que gustes ;)

[@user87546]

🤯

[@jonmircha]

😅

[@rodolfogarcia2011]

Me surgue la pregunta, en este curso se incluirá Ajax?

[@jonmircha]

Sí

[@rodolfogarcia2011]

@@jonmircha gracias por responder Jon

[@edwina.espinaltaveras4222]

Suerte que me vi un curso de CSS

[@jonmircha]

Puedes ver el mío 😉 kzbin.info/aero/PLvq-jIkSeTUbFYbzpJFN1GLMBZnm9hX5G

[@edwina.espinaltaveras4222]

@@jonmircha Saludos, despues de ver este curso vere ese otro curso Muchas Gracias

[@ivantg4572]

y como se haria si yo tengo la hoja de estilos linkeada en el HTML me ayudas por favor?

[@heferh4320]

me doy cuenta que ya al haber metodos directos como document.body, document.images, document.links ,etc y guardarlos en variables no es necesario buscar con querySelectorAll por nombre de estas etiquetas comunes (yo lo hacia como lo comento ahora ) edit : me di cuenta que no se les puede aplicar forEach :0

[@jonmircha]

😮

[@sebastianmorales823]

No falta el hater exigente que va y le da dislike a un contenido tan bueno solo para creerse lo mas original que existe*

[@jonmircha]

¯\_(ツ)_/¯

[@manuelcobasguerra5688]

Yo Antes de ver el video: ah estilos y variables css debe ser algo super facil de entender Yo Despues de Ver el Video: WHAT!! jaja Buen Video tal vez tenga repetirlo unas cuantas veces pero me gusto el video saludos

[@luisluna8900]

entonces esto debe ser ya CSSOM?

[@jonmircha]

Sí

[@davidsalvador3855]

intente poner el estilo desde el documento css pero cuando aplico el .style no me figura nada en consola. solo se aplica para lo que este configurado en html?

[@snk263]

no se si es a lo que te referis pero para poder llamar la variable si la creaste en css tenes q crearla dentro de :root { --black-color:#000; } en el archivo css y lo llamas de la misma manera que lo hace jon en el video con getComputedStyle(document.documentElement).getPropertyValue('---black-color')

[@benitoalvarez8032]

Prefiero usar soloe lcss graciasss

[@jonmircha]

Esto no es para hacer CSS convencional, sino dinámico, cuando llegues a los ejercicios, lo entenderás ;)

[@benitoalvarez8032]

@@jonmircha Está bien jonmircha disculpa por eso, confió en ti. Saludos buen docente digital

[@MaxielJohannaCamargoGomez]

jajajaja mi cabeza Blommmm

[@manuelcobasguerra5688]

por cierto cuando escribi getComputedStyle y recargue la pagina de mi navegador el uso de la memoria ram se disparo y tuve que comentarla me imagino que sera por que mi pc no es muy potente y al mostrar tanta informacion se colgo jaja bueno tambien teniendo en cuenta que tenia abierto el Visual studio code con 5 codigos abiertos 2 carpetas y 3 paginas del navegador mas la terminal de linuxmint

[@jonmircha]

🤔 qué raro

[@ronaldm.r]

Mi pc se laguea con tan solo mostrar el objeto window XD

[@rafaelcallejo8367]

QUE ES __proto__ ???

[@jonmircha]

El prototipo del objeto

[@manuelcamposolivera4834]

sensei: espero no les haya estallado mucho la cabeza... yo: diablos a mi no me afecta , eh ganado superpoderes ? gracias sensei por la enseñanza

[@lawrent6209]

creo que mejor me quedo con la notacion del punto XD

[@jonmircha]

👉🏻

[@nikolahs92]

gracias excelente video

[@jonmircha]

Gracias por comentar