Curso Básico de Javascript 18.- Modificando el estilo de los elementos

FalconMasters
28 Aug 201512:31

Summary

TLDREn este capítulo del curso, Carlos Arturo nos guía a través de la modificación de estilos CSS utilizando clases en JavaScript. Comienza explicando cómo agregar y manejar clases CSS, demostrando con ejemplos prácticos cómo cambiar y combinar estilos. Luego, profundiza en la manipulación directa de estilos a través del atributo 'style', mostrando cómo cambiar propiedades CSS dinámicamente con JavaScript. El capítulo concluye con una introducción a una práctica futura que ayudará a aplicar estos conceptos en situaciones reales. ¡No olvides suscribirte y seguir sus contenidos para más tutoriales sobre desarrollo web!

Takeaways

  • 👋 Carlos Arturo presenta un capítulo de su curso sobre cómo modificar estilos de elementos con JavaScript utilizando clases CSS.
  • 📝 Se menciona que en el capítulo anterior ya se habló sobre trabajar con clases y se hizo una breve introducción.
  • 🎨 Se enfatiza que el capítulo se centrará en cómo utilizar JavaScript para trabajar con clases y realizar dos pequeñas prácticas.
  • 🔑 Se presenta un ejemplo de cómo se aplican las clases 'título' y 'título grande' a un encabezado para cambiar su estilo.
  • 🛠 Se explica que con JavaScript se pueden agregar y quitar clases de los elementos para modificar sus estilos dinámicamente.
  • 📚 Se da un ejemplo práctico de cómo agregar la clase 'título grande' a un encabezado utilizando `className` en JavaScript.
  • 🔍 Se muestra cómo se pueden acceder y modificar directamente las propiedades de estilo de un elemento a través de `style` en JavaScript.
  • 👀 Se menciona que los cambios en el estilo a través de JavaScript se reflejan en el atributo `style` en el DOM del documento.
  • 🔧 Se discute cómo se pueden manejar propiedades de CSS que tienen varias palabras, siguiendo cierta sintaxis.
  • 🔄 Se presenta la técnica de reemplazar una clase específica en un elemento para quitarla, usando el método `replace`.
  • 📚 Se invita a los espectadores a suscribirse al canal y seguir en Twitter si les gustó el contenido, y se menciona el sitio web www.mastercard.com para más recursos.

Q & A

  • ¿Qué nombre tiene el instructor del curso en el guion proporcionado?

    -El nombre del instructor es Carlos Arturo.

  • ¿En qué se enfoca este capítulo del curso?

    -Este capítulo se enfoca en aprender a modificar el estilo de los elementos HTML utilizando clases CSS con JavaScript.

  • ¿Qué es lo que se discute en el guion sobre trabajar con clases CSS?

    -Se discute cómo aplicar y modificar clases CSS a elementos HTML para cambiar su estilo, y cómo utilizar JavaScript para agregar y eliminar clases.

  • ¿Qué prácticas se mencionan en el guion para este capítulo?

    -Se menciona que habrá dos pequeñas prácticas, aunque solo se detalla una que involucra trabajar con clases CSS.

  • ¿Qué elementos HTML se utilizan como ejemplo en el guion para aplicar estilos con clases CSS?

    -Se usan un encabezado y un título como ejemplos para aplicar estilos con clases CSS.

  • ¿Cómo se describe el proceso de agregar una segunda clase CSS a un elemento HTML en el guion?

    -Se describe accediendo al elemento HTML mediante JavaScript, y luego agregando la nueva clase utilizando el método 'className' o modificando directamente el atributo 'style'.

  • ¿Qué métodos de JavaScript se mencionan para manipular clases CSS en el guion?

    -Se mencionan el uso de 'className' para agregar o modificar clases y el uso del atributo 'style' para cambiar propiedades CSS directamente.

  • ¿Cómo se puede cambiar dinámicamente el estilo de un elemento HTML utilizando JavaScript según el guion?

    -Se puede cambiar accediendo al elemento mediante JavaScript y utilizando el objeto 'style' para modificar las propiedades CSS deseadas.

  • ¿Qué se sugiere en el guion sobre cómo los diseñadores web pueden utilizar JavaScript para adaptar los estilos según las preferencias del usuario?

    -Se sugiere que los diseñadores web pueden utilizar JavaScript para preguntar al usuario sobre sus preferencias, como el color favorito, y luego aplicar esos estilos dinámicamente en el atributo 'style'.

  • ¿Cómo se explica en el guion el proceso de quitar una clase de un elemento HTML?

    -Se explica que se puede acceder al 'className' del elemento, y utilizar el método 'replace' para encontrar y reemplazar la clase que se desea quitar por un espacio en blanco.

  • ¿Qué invitación final hace el instructor en el guion para los espectadores?

    -El instructor invita a los espectadores a suscribirse al canal, dar 'me gusta' al video, compartirlo y seguirlo en Twitter si les gustó el video, además de visitar su sitio web para encontrar más tutoriales y recursos sobre desarrollo y diseño web.

Outlines

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Mindmap

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Keywords

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Highlights

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora

Transcripts

plate

Esta sección está disponible solo para usuarios con suscripción. Por favor, mejora tu plan para acceder a esta parte.

Mejorar ahora
Rate This

5.0 / 5 (0 votes)

Etiquetas Relacionadas
JavaScriptCSSTutorialEstilosClasesWebDiseñoDesarrolloInteractivoMasterización