Ejemplo
Obtener el computarizada (actual showing) color de fondo de un div:
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed background color for the test div is: <span
id="demo"></span></p>
<script>
function myFunction() {
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
null).getPropertyValue("background-color");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script>El resultado será:
The computed background color for the test div is: rgb(173, 216, 230) Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
El getComputedStyle() método se lleva toda la real (computed) propiedad CSS y los valores del elemento especificado.
El estilo computarizada es el estilo utilizado; fuimos en mostrar el elemento, después de estilos de de múltiples fuentes se han apllied.
fuentes de estilo pueden incluir: hojas internas estilo, hojas de estilo externas, estilos heredados y los estilos por defecto del navegador.
El getComputedStyle() método devuelve un objeto CSSStyleDeclaration .
Soporte del navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Método | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11.5 |
Sintaxis
Los valores de los parámetros Parámetro Descripción element Necesario. El elemento para conseguir el estilo calculado para pseudoElement Opcional. Un pseudo-elemento para conseguir
Detalles técnicos
Valor de retorno: Un bloque de declaración de CSS objeto CSSStyleDeclaration que contiene del elemento.
Más ejemplos
Ejemplo
Obtener todos los estilos calcula a partir de un elemento:
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed styles for the test div are: <br><span
id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var txt;
cssObj = window.getComputedStyle(elem, null)
for
(i = 0; i < cssObj.length; i++) {
cssObjProp = cssObj.item(i)
txt += cssObjProp + " = " + cssObj.getPropertyValue(cssObjProp) + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
</script> Inténtalo tú mismo " Ejemplo
Obtener el tamaño de fuente del ordenador de la primera letra de la div de prueba (usando pseudo-elemento):
<div id="test" style="height: 50px;background-color: lightblue;">Test
Div</div>
<p>The computed font size for div::first-letter in the test div
is: <span id="demo"></span></p>
<script>
function myFunction(){
var elem = document.getElementById("test");
var
theCSSprop = window.getComputedStyle(elem,
"first-letter").getPropertyValue("font-size");
document.getElementById("demo").innerHTML = theCSSprop;
}
</script> Inténtalo tú mismo "