Esta publicación describe el objetivo, el funcionamiento y el uso del método 'getComputedStyle()' del objeto de ventana en JavaScript.
¿Qué hace el método 'getComputedStyle()' del objeto de ventana en JavaScript?
El ' obtenerEstiloComputado() El método devuelve el objeto 'CSSStyleDeclaration' que contiene una colección de propiedades CSS y sus valores. Calcula las propiedades de estilo del elemento HTML de destino. Además, también juega un papel importante en el cálculo de las propiedades de estilo de la parte específica del elemento HTML.
Sintaxis
ventana. getComputedStyle ( elemento , pseudoElemento )
En la sintaxis anterior:
- ventana: Es el objeto global que representa la ventana del navegador.
- elemento: Especifica el elemento HTML particular cuyo estilo debe calcularse.
- pseudoElemento: Se refiere a la parte del elemento HTML dado, por ejemplo, primera letra, última letra, etc.
La siguiente sección lleva a cabo la ilustración práctica del método “getComputedStyle()” con la ayuda de ejemplos.
Código HTML (incluido el estilo CSS)
Primero, tenga una descripción general del siguiente código HTML:
< cabeza >
< estilo >
h3{
tamaño de fuente: 20px;
color de fondo: verde amarillo
}
< / estilo >
< / cabeza >
< cuerpo >
< h2 > Utilice el método getComputedStyle() del objeto de ventana < / h2 >
< h3 identificación = 'manifestación' > El tamaño de fuente del elemento HTML dado es: < / h3 >
< pag identificación = 'muestra' >< / pag >
En las líneas de código anteriores:
- El '
La etiqueta ” aplica el estilo indicado del “ ” Elemento HTML. - En el '
”, se incluye un subtítulo en la sección “ ” - A continuación, el elemento '
' que tiene una identificación ' manifestación ” especifica un segundo subtítulo.
- Por último, el “ 'etiqueta se refiere a un párrafo vacío con una identificación' muestra ” para mostrar las propiedades CSS calculadas del elemento de destino.
Nota: Este código HTML se sigue en todos los ejemplos indicados de esta publicación.
Ejemplo 1: Aplicar el método “getComputedStyle()” para calcular el tamaño de fuente del elemento HTML
Este ejemplo aplica el método 'getComputedStyle()' para obtener el tamaño de fuente del elemento HTML de destino.
Código JavaScript
Considere el código JavaScript indicado:
< guion >constante elemento = documento. getElementById ( 'manifestación' ) ;
constante objeto = ventana. getComputedStyle ( elemento )
dejar tamaño = objeto obtener valor de propiedad ( 'tamaño de fuente' ) ;
documento. getElementById ( 'muestra' ) . HTML interno = tamaño ;
guion >
En el fragmento de código anterior:
- Declarar una variable “ elemento ” con una palabra clave “const” que utiliza el “ getElementById() ” método para acceder al elemento “
” a través de su id “ manifestación ”.
- Después de eso, aplique el “ obtenerEstiloComputado() ” para calcular las propiedades CSS del elemento “
” obtenido.
- A continuación, el “ tamaño La variable ” aplica el “ obtenerValorPropiedad() 'método que devuelve el valor de la propiedad CSS aplicada' tamaño de fuente ” como una cadena.
- Por último, el método 'getElementById()' accede al párrafo vacío y muestra el valor de la propiedad CSS calculado usando el ' HTML interno ' propiedad.
Producción
Como se ve, la salida muestra el valor de tamaño de fuente aplicado contra el elemento HTML correspondiente, es decir, '
'.
Ejemplo 2: Aplicar el método “getComputedStyle()” para calcular el color de fondo del elemento HTML
En este ejemplo, el método discutido se utiliza para calcular el color de fondo del elemento HTML específico:
< guion >constante elemento = documento. getElementById ( 'manifestación' ) ;
constante objeto = ventana. getComputedStyle ( elemento )
deja que bgcolor = objeto obtener valor de propiedad ( 'color de fondo' ) ;
documento. getElementById ( 'muestra' ) . HTML interno = bgcolor ;
guion >
En el bloque de código anterior, el ' obtenerEstiloComputado() El método ” calcula el “ color de fondo ” del elemento “
” cuyo id es “demo” y devuelve su valor como “rgb” a través del “ obtenerValorPropiedad() ' método.
Producción
El resultado muestra claramente el color de fondo calculado del elemento HTML obtenido.
Conclusión
JavaScript ofrece el “ obtenerEstiloComputado() ” método para calcular las propiedades de estilo CSS del elemento HTML de destino. El valor calculado de este método es una cadena que contiene las propiedades CSS y sus valores. Se puede implementar de diferentes formas utilizando JavaScript para obtener las propiedades CSS de cualquier elemento HTML. Esta publicación proporcionó una vista detallada del objetivo, el funcionamiento y el uso del método 'getComputedStyle ()' del objeto de ventana en JavaScript.