Esempio
Prendi il computerizzata (actual showing) colore di sfondo di 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>Il risultato sarà:
The computed background color for the test div is: rgb(173, 216, 230) Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e l'utilizzo
Il getComputedStyle() metodo ottiene tutti gli effettivi (computed) proprietà CSS e valori dell'elemento specificato.
Lo stile calcolato è lo stile acutally utilizzato nella visualizzazione dell'elemento, dopo stylings provenienti da più fonti sono state apllied.
Fonti di stile possono includere: fogli interni di stile, fogli di stile esterni, stili ereditati e gli stili di default del browser.
Il getComputedStyle() metodo restituisce un oggetto CSSStyleDeclaration .
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente il metodo.
| Metodo | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11.5 |
Sintassi
valori dei parametri Parametro Descrizione element Necessario. L'elemento per ottenere lo stile calcolato per pseudoElement Opzionale. Uno pseudo-elemento per ottenere
Dettagli tecnici
Valore di ritorno: Un oggetto CSSStyleDeclaration contenente blocco di dichiarazione CSS dell'elemento.
Altri esempi
Esempio
Ottenere tutti gli stili elaborati da 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> Prova tu stesso " Esempio
Ottenere la dimensione del carattere del computer della prima lettera del div di prova (con 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> Prova tu stesso "