Exemplu
Ia calculat (actual showing) culoarea de fond a unui 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>Rezultatul va fi:
The computed background color for the test div is: rgb(173, 216, 230) Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
getComputedStyle() metoda devine tot real (computed) proprietatea CSS și valorile elementului specificat.
Stilul calculat este stilul utilizat acutally în afișarea elementului, după ce din mai multe surse stilului au fost APLICABIL.
Sursele de stil pot include: foi de stil interne, foi de stil externe, stiluri moștenite și stiluri implicite browser-ul.
getComputedStyle() metoda returneaza un obiect CSSStyleDeclaration .
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin metoda.
| Metodă | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9 | 4 | 5 | 11.5 |
Sintaxă
Valorile parametrilor Parametru Descriere element Necesar. Elementul pentru a obține stilul calculat pentru pseudoElement Opțional. Un element pseudo pentru a obține
Detalii tehnice
Întoarcere Valoare: Un bloc de declarație CSS obiect CSSStyleDeclaration conținând elementului.
Mai multe exemple
Exemplu
Obține toate stilurile calculate de la un element:
<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> Încearcă - l singur » Exemplu
Obțineți dimensiunea fontului de calculator din prima literă din div de test (folosind pseudo-elemente):
<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> Încearcă - l singur »