Contoh
Dapatkan dihitung dengan (actual showing) warna latar belakang dari 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>Hasilnya akan:
The computed background color for the test div is: rgb(173, 216, 230) Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
The getComputedStyle() metode mendapatkan semua yang sebenarnya (computed) properti CSS dan nilai-nilai dari elemen tertentu.
Gaya dihitung adalah gaya acutally digunakan dalam menampilkan elemen, setelah stylings dari berbagai sumber telah diaplikasikan.
sumber Style dapat mencakup: lembar internal yang gaya, style sheet eksternal, gaya mewarisi dan gaya browser default.
The getComputedStyle() metode mengembalikan sebuah objek CSSStyleDeclaration .
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11,5 |
Sintaksis
Nilai parameter Parameter Deskripsi element Wajib. elemen untuk mendapatkan gaya dihitung untuk pseudoElement Pilihan. Sebuah pseudo-elemen untuk mendapatkan
Rincian teknis
Kembali Nilai: Sebuah CSSStyleDeclaration objek yang berisi blok CSS deklarasi elemen.
Contoh lebih
Contoh
Dapatkan semua gaya dihitung dari unsur:
<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> Cobalah sendiri " Contoh
Dapatkan ukuran font komputer dari huruf pertama dalam div tes (menggunakan pseudo-elemen):
<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> Cobalah sendiri "