El método getComputedStyle() se usa para obtener todas las propiedades y valores CSS calculados del elemento especificado .
El uso del estilo calculado muestra el elemento después de que se hayan aplicado estilos de múltiples fuentes.
El método getComputedStyle() devuelve un objeto CSSStyleDeclaration.
Sintaxis:
window.getComputedStyle(element, pseudoElement)
Parámetros:
- elemento: El elemento para obtener el estilo calculado para
- pseudoElement: Un pseudo-elemento a obtener. este es un parámetro opcional.
Ejemplo: Devuelve la familia de fuentes del texto en div.
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Window getComputedStyle() Method
</title>
<style>
div {
color: white;
text-align: justify;
}
</style>
</head>
<body>
<center>
<p>
<button onclick="myFunction()">
Try it
</button>
</p>
<div id="test" style="height: 100px;
background-color: green;
font-size: 50px;
padding-left: 140px;
padding-top: 50px;">
Geeks for Geeks
</div>
<p>
The computed font-family of text
in the test div is:
<span id="demo"></span>
</p>
<script>
function myFunction() {
var elem = document.getElementById("test");
var theCSSprop =
window.getComputedStyle(
elem, null).getPropertyValue("font-family");
document.getElementById("demo").innerHTML =
theCSSprop;
}
</script>
</center>
</body>
</html>
Salida:
Antes de hacer clic en el botón: 
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con el método Windows getComputedStyle() se enumeran a continuación:
- Google Chrome 11.0
- Internet Explorer 9.0
- Firefox 4.0
- Ópera 11.5
- Safari 5
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA