Örnek
Bilgisayarlı alın (actual showing) bir div arka plan rengini:
<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>Sonuç şu olacaktır:
The computed background color for the test div is: rgb(173, 216, 230) Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
getComputedStyle() metodu bütün gerçek alır (computed) belirtilen elemanın CSS özelliğini ve değerleri.
bilgisayarlı tarzı acutally birden fazla kaynaktan stylings uygulanmamaktadır sonra, eleman görüntülenmesinde kullanılacak tarzıdır.
Stil kaynakları şunları içerebilir: iç stil sayfaları, dış stil sayfaları, kalıtsal stilleri ve tarayıcı varsayılan stilleri.
getComputedStyle() metodu döndürür CSSStyleDeclaration nesnesi .
Tarayıcı Desteği
Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtin.
| Yöntem | |||||
|---|---|---|---|---|---|
| getComputedStyle() | 11.0 | 9.0 | 4.0 | 5 | 11.5 |
Sözdizimi
Parametre Değerleri Parametre Açıklama element Gereklidir. eleman için hesaplanan stil almak için pseudoElement İsteğe bağlı. Bir sözde eleman elde etmek için
Teknik detaylar
Geri dönüş değeri: elemanının bir CSSStyleDeclaration nesnesi içeren CSS bildirimi bloğu.
Diğer Örnekler
Örnek
Bir elemanın tüm bilgisayarlı stilleri alın:
<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> Kendin dene " Örnek
(Sözde elemanı kullanılarak) testi div ilk harfin bilgisayar tipi boyutunu alın:
<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> Kendin dene "