Esta guía profundiza en el objetivo y el funcionamiento de la propiedad de 'estilo' del elemento HTML DOM en JavaScript.
¿Cómo funciona la propiedad de 'estilo' del elemento HTML DOM en JavaScript?
El HTML DOM “ estilo ” es una propiedad de solo lectura que funciona según las propiedades de estilo asignadas en consecuencia. Además, devuelve el “ CSSStyleDeclarationCSSStyleDeclaration ” objeto que contiene todos los atributos de estilo en línea del elemento HTML en particular.
Nota: El objeto 'CSSStyleDeclaration' contiene los atributos de estilo CSS definidos en la sección principal.
Sintaxis (establecer una propiedad de estilo)
elemento. estilo . propiedad = valorDe acuerdo con la sintaxis anterior, el “ estilo 'la propiedad solo admite un parámetro' valor ” que representa el valor de la propiedad de estilo especificada.
Sintaxis (Devuelve una propiedad de estilo)
elemento. estilo . propiedadImplementemos las sintaxis discutidas anteriormente de la propiedad 'estilo' de manera práctica.
Ejemplo 1: use la propiedad 'estilo' para establecer el color de un elemento HTML en particular
Este ejemplo aplica la sintaxis básica de ' estilo ” para establecer el valor de la propiedad “estilo” de modo que se cambie el color del elemento HTML en particular.
código HTML
Primero, revise el código HTML dado:
< h2 > Usar la propiedad de estilo en JavaScript h2 >
< identificación h3 = 'H3' > Segundo Subtítulo. h3 >
En las líneas de código anteriores:
- El ' La etiqueta HTML especifica el primer subtítulo.
- El ' La etiqueta ” crea el segundo subtítulo del nivel 3 con una identificación asignada “H3”.
Código JavaScript
A continuación, siga el código JavaScript indicado:
< guion >documento. getElementById ( 'H3' ) . estilo . color = 'verde' ;
guion >
En el fragmento de código anterior, el ' documento.getElementById() El método 'accede al incluido' ” elemento a través de su id “ H3 ” para establecer el “ color ” valor de atributo del elemento a través del “ estilo.color ' propiedad.
Producción
El resultado muestra que la representación visual del elemento HTML de destino se establece en consecuencia mediante la propiedad 'estilo'.
Ejemplo 2: use la propiedad 'estilo' para obtener el valor del atributo 'estilo' aplicado
En este ejemplo, la propiedad de 'estilo' ayuda a encontrar el atributo de 'estilo' asignado del elemento HTML usando su sintaxis generalizada (Devolver una propiedad de estilo).
código HTML
El código HTML se indica aquí:
< h2 > Usar la propiedad de estilo en JavaScript h2 >< identificación h3 = 'H3' estilo = 'color de fondo: naranja;' > El valor del color de fondo del segundo subtítulo es : h3 >
< identificación h4 = 'manifestación' > h4 >
En este código:
- El ' La etiqueta HTML utiliza el atributo 'estilo' que establece el color de fondo del elemento HTML '
'.
- El ' 'la etiqueta crea un subtítulo vacío del nivel 4 que tiene una identificación' manifestación ”.
Código JavaScript
Ahora, mira el código JavaScript dado:
< guion >constante valor = documento. getElementById ( 'H3' ) . estilo . color de fondo ;
documento. getElementById ( 'manifestación' ) . HTML interno = valor ;
guion >
En el código escrito anteriormente:
- La variable ' valor ” se declara con un “ constante ” palabra clave que aplica el “ documento.getElementById() ” para obtener el elemento “
” usando su id para obtener el valor del atributo de “estilo” aplicado y aplicarlo al elemento, es decir, “
” a través de la propiedad “estilo”.
- El método 'document.getElementById()' se usa nuevamente para acceder al elemento vacío agregado '
' y mostrar el valor del atributo 'estilo' asignado contra el elemento HTML obtenido y agregarlo como un subtítulo a través del ' HTML interno ' propiedad.
Producción
La salida aplica el color de fondo al elemento y el valor del atributo de 'estilo' establecido también se devuelve en consecuencia.
Conclusión
JavaScript utiliza el ' estilo ” para asignar y devolver las propiedades de “estilo” en línea del elemento HTML DOM. Requiere un 'valor' adicional para aplicar la funcionalidad deseada en consecuencia. Además de configurar y recuperar, también es beneficioso cambiar el atributo de 'estilo' existente. Esta guía demostró el objetivo principal, el trabajo y la implementación práctica de la propiedad de estilo del elemento HTML DOM.