Hace algunos videos introduje este concepto de seleccionar elementos y luego manipularlos.
Así que seleccionamos una H1 o todas las etiquetas de imagen y luego podemos cambiar el color o animarlas o hacer que hagan algo
cuando haces clic en ellas.
Hasta ahora solo cubrimos la mitad de selección y este video.
Vamos a presentar algunas de las muchas maneras de manipular elementos una vez que los hemos seleccionado.
Así que aquí están las cuatro cosas principales de las que quiero hablar.
El primero es cómo cambiamos un estilo de elemento.
¿Cómo lo hacemos azul o lo hacemos esconder?
Cambiar el tamaño de la fuente.
A continuación, hablaremos de agregar y eliminar clases con javascript y luego cambiar el contenido de
una etiqueta.
Entonces, ¿cómo puedo cambiar el texto dentro de una etiqueta H-1, por ejemplo?
Y finalmente, cambiando los atributos.
Entonces, ¿cómo podemos cambiar la fuente en una etiqueta de imagen o la referencia en una etiqueta AA?
Comenzaremos hablando de la propiedad de estilo.
estilo es un objeto enorme con cientos de propiedades, una por cada propiedad de CSSA que podemos establecer.
Entonces, cuando se construye el DOM y se crea un nodo individual o se crea un objeto para cada elemento
individual, hay una propiedad llamada estilo y la propiedad de
Por lo tanto, podemos escribir javascript que luego irá estilo y elemento de manera diferente.
Así que aquí estoy seleccionando un elemento por su resaltado Id, así que selecciono guardarlo en una variable llamada etiqueta
y luego manipularla.
Y lo que estoy haciendo me estoy poniendo.
El color de punto de estilo de punto de etiqueta para ser el borde de punto de estilo de punto de etiqueta azul es igual a 10 píxeles de color rojo sólido.
Es importante tener en cuenta que el lado derecho debe ser una cuerda.
Entonces, aunque en C Ss no necesitamos poner comillas en azul o alrededor de 70 P x.
Esto no es C Ss.
Esto es javascript
Entonces todavía tenemos que seguir las reglas regulares de JavaScript.
Así que tengo una página web simple configurada que voy a usar para demostrar algunas de estas propiedades.
Entonces, esta página web es súper simple, solo un H-1, un párrafo en lugar de ese párrafo.
Hay una etiqueta fuerte y luego dos imágenes de dos adorables mezclas de corgi.
Cónsul y necesito comenzar seleccionando algo y voy a cambiar el color y el borde de este H-1.
Entonces, lo que voy a hacer es ir al
Así que tengo que seleccionarlo y hay múltiples formas de hacerlo en un documento nuevo
que consulta al selector H-1.
Y luego te mostraré el estilo H-1, que es un objeto gigante con toneladas y toneladas de propiedades.
Así que voy a intentar cambiar uno de ellos como el color oscuro estilo H-1 y hacer que el amarillo.
Y se podía ver que cambió inmediatamente a amarillo.
Lo mismo con el borde H-1 que el estilo que el borde es igual a vamos a hacer cinco píxeles de color rosa sólido.
Y ahí vamos.
Así que, por supuesto, si solo quisiéramos que fuera amarillo con un borde rosa.
Desde el momento en que se cargó la página, no hay ninguna razón para usar javascript para hacer eso.
Acabamos de ponerlo en nuestro archivo CSSA, usaríamos javascript si quisiéramos que se tornara amarillo y un borde rosa cuando el
usuario ha estado en la página por cinco segundos o si él quería que sucediera cuando el usuario se desplazó a
una parte específica de la página o en el usuario hizo clic en algo.
Se trata de hacer las cosas interactivas y veremos cómo hacerlo en breve.
estilo es que si te encuentras manipulando un montón de archivos en un elemento
individual como lo estoy haciendo aquí y cambiando cinco propiedades diferentes en esta etiqueta definitivamente hay una mejor manera.
Bueno, lo bueno de usar la propiedad de
Y hay algunas razones por las que hay una mejor manera.
El primero es que este código no es muy seco.
Hay un montón de estilos etiquetados de estilo repetidos etiquetados.
Más importante aún es que existe este concepto llamado separación de preocupaciones.
Entonces, la separación de preocupaciones es este concepto de que nuestro H M L R C S no es javascript.
Cada uno es responsable de su pequeño dominio y no lo queremos.
No queremos una gran cantidad de cruces entre ellos.
Entonces en este diagrama puede ver que hay un poco de cruce entre cada equipo con el cual
está la estructura y javascript que es ese comportamiento y luego ver evaluar es la presentación.
Y hay una pequeña superposición con H html javascript, pero recuerde que solía ser antes de que
aparecieran C Ss. Tenía que escribir sus estilos individualmente en cada elemento en el que usamos el atributo
de estilo.
En ese caso, en nuestra presentación, el diseño se tejió en la estructura y con C S ahora
los hemos separado.
Entonces, nuestra HMO es pura estructura y nuestro éxito es puro estilo.
Entonces, lo que javascript encaja es que debería controlar el comportamiento de una página y, a veces,
eso significa cambiar el aspecto de las cosas, en lugar de simplemente cambiar las propiedades dentro de javascript,
haciendo el estilo en el javascript.
Lo que podemos hacer es encenderlos y apagarlos dentro del archivo CSSA.
Entonces, uno de los patrones que es realmente común es que definimos una clase CSSA como resaltar y esa clase
de resaltar tendrá cinco o seis o muchas propiedades distintas que estamos cambiando.
Y luego podemos seleccionar un elemento con javascript y darle esa clase de resaltado.
Entonces, en Javascript con una línea podemos agregar una clase que luego cambiará cinco propiedades diferentes.
Echemos un vistazo a cómo esto se implementaría en Javascript.
Entonces, en lugar de seleccionar una etiqueta y luego cambiar el estilo, pero el color es azul y luego el borde estilizado
es rojo fijo de 10 píxeles, lo que podríamos hacer es encontrar una clase en esa clase que se pueda llamar cualquier cosa.
Por lo general, quiere que sea algo significativo para reflejar lo que se supone que debe hacer la clase.
Es algo que se destaca o es una respuesta correcta.
Un puntaje alto por la razón que sea que esté aplicando la clase intentando encontrar un buen nombre.
Así que este no es un buen nombre, pero algunas clases de alguna clase están cambiando el color para que sea azul y el
borde rojo sólido de 10 píxeles.
Entonces, todo lo que tengo que hacer es seleccionar mi etiqueta y luego etiquetar la lista de la clase punto agregar una clase y eso
dará mi etiqueta con la idea de resaltar una nueva clase llamada alguna clase en la que se aplicarán
todos estos estilos.
Hay algunas otras cosas que podemos hacer con la lista de clase.
Así que en este ejemplo muestro tres métodos add que ya vimos, que es cómo podemos agregar una clase remove que toma
un nombre de clase y elimina ese nombre de clase de la lista de clases y luego alterna la lista de
clases, que es extremadamente útil.
Toma un nombre de clase.
Y si el elemento dado ya tiene esa clase, entonces lo eliminará si el elemento no tiene esa
clase y luego lo encenderé.
Muy muy útil.
Lo usaremos todo el tiempo más adelante.
Así que déjame demostrarte eso antes de volver a mi ejemplo aquí.
De hecho, voy a definir una nueva clase.
Entonces, en lugar de crear una nueva hoja de estilo y usar un enlace, solo voy a usar una etiqueta de estilo solo por
el tiempo.
Así que voy a definir una clase que vas a llamar grande.
Y lo que voy a hacer es cambiar el tamaño de la fuente a 100 píxeles y cambiar el color a naranja.
Y finalmente, démosle un borde de cinco píxeles de color rojo sólido.
Así que lo dejo así.
Si actualizo mi página, nada cambia, por supuesto, pero cuando quiero hacerlo es aplicar esa clase a algo.
Así que voy a hacer que este párrafo tenga la gran clase para hacer, así que tengo que seleccionarlo hasta ahora.
El párrafo es igual al documento que consulta el párrafo selector.
DE ACUERDO.
Y comencemos por echar un vistazo a la lista de clases y puede ver que está vacía.
No hay clases asignadas a este párrafo todavía.
Entonces, si quiero asignar uno, todo lo que necesito hacer es decir P-Dub class list dot add y quiero agregar
la clase grande.
Y ahí vamos.
Por lo tanto, refleja automáticamente los nuevos cambios de mi hoja de estilos.
Todo lo que tuve que hacer fue agregar la clase grande.
Así que con suerte se puede ver que esto es mucho más fácil y que estamos separando las responsabilidades.
Entonces, todo lo que hace javascript es activar o desactivar una parte específica de la SS en
lugar de manipular manualmente las propiedades individuales.
Ahora solo estamos cambiando las cosas lo menos posible en lugar de nuestro Javascript.
Entonces, si quiero eliminarlo, todo lo que tengo que hacer es hacer clase sin clase, no eliminar grande, y mi favorito,
que mencioné es súper útil, es alternar.
Entonces, si presiono alternar en este momento y presiono enter, no hay ninguna clase asignada por lo que le asignará
la clase grande.
Ahora grande ya está asignado, así que lo eliminará.
Así que esto es útil, obviamente, no en este caso para hacer que este color naranja loco en la clase de fuente enorme, pero lo que podríamos hacer
es en algo así como una lista de pendientes si queremos que el usuario pueda hacer clic en él para hacer.
Y eso lo tachará.
Pero pueden volver a hacer clic y luego se desenredará o simplemente volverá a la normalidad.
Eso estaría hecho.
O podríamos hacerlo alternar una clase para que podamos hacer una clase llamada "done" y hacer clic en clic
aplicado nuevamente.
Se elimina.
Ese es solo un ejemplo de cuándo puede usar alternar.
Pero es realmente realmente útil.
El último punto que mencionaré sobre la lista de clases es que técnicamente no es una matriz.
Entonces eso significa que tenemos que usar un anuncio para agregar una clase.
No podemos hacer algo como empujar.
Solo una pequeña nota, pero es importante saber que técnicamente no es una matriz.
Así que cubrimos dos formas diferentes de manipular el estilo a través de nuestro javascript.
manualmente una propiedad a la vez, lo que es honestamente correcto si solo está haciendo una o dos cosas.
El primero lo está haciendo
Pero si lo haces en un lote o lo estás haciendo en varios elementos, es mucho mejor un
estilo más convencional para usar una clase y activar o desactivar la clase.