Exemplo
Obter o computado (actual showing) cor de fundo de uma 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>O resultado será:
The computed background color for the test div is: rgb(173, 216, 230) Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
O getComputedStyle() método recebe todo o real (computed) propriedade CSS e os valores do elemento especificado.
O estilo computadorizada é o estilo efectivamente utilizado na exibição do elemento, depois stylings de várias fontes foram apllied.
fontes de estilo podem incluir: folhas internas estilo, folhas de estilo externas, estilos herdados e estilos padrão do navegador.
O getComputedStyle() método devolve um objecto CSSStyleDeclaration .
Suporte navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11,0 | 9 | 4.0 | 5 | 11,5 |
Sintaxe
Os valores dos parâmetros Parâmetro Descrição element Requeridos. O elemento para obter o estilo computadorizada para pseudoElement Opcional. Um pseudo-elemento para obter
Detalhes técnicos
Valor de retorno: Um objecto CSSStyleDeclaration contendo bloco declaração CSS do elemento.
mais Exemplos
Exemplo
Obter todos os estilos calculado a partir de um 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> Tente você mesmo " Exemplo
Obter o tamanho da fonte do computador da primeira letra na div de teste (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> Tente você mesmo "