getComputedStyle Fonksiyonu

getComputedStyle fonksiyonu, bir elementin herhangi bir CSS özelliğinin değerini, hatta CSS dosyasından geleni almayı sağlar.

Sözdizimi

let nesne = getComputedStyle(element);

Detaylar

Nasıl çalışır (dikkat: beklediğimiz gibi değil): fonksiyon parametre olarak elementi alır, ve iletilen elementin tüm CSS özelliklerini içeren bir nesne döndürür. Hadi bu nesneyi style değişkenine koyalım. İsim isteğe bağlıdır, bu sadece bir değişken - nasıl uygun görürsek öyle erişiriz:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // style içinde CSS özellikleri var

Hadi mesela genişliği çıktılayalım. Bu şu şekilde yapılır - style.width:

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.width);

Mesela sol padding'i çıktılamak için - şu şekilde yaparız - style.paddingLeft:

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log(style.paddingLeft);

Aşağıdaki örnekte, elementimiz için ilgilendiğimiz tüm CSS özelliklerini çıktılayacağız:

<div id="elem">metin</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('paddingLeft: ' + style.paddingLeft); // '30px' çıktılar
console.log('borderTopWidth: ' + style.borderTopWidth); // '20px' çıktılar
console.log('borderTopStyle: ' + style.borderTopStyle); // 'solid' çıktılar

getComputedStyle'in Hassasiyetsizliği

Bazen getComputedStyle fonksiyonu genişlik ve yükseklikle tam olarak doğru çalışmaz. Bunun nedeni, padding ve kenarlığın bloku genişletmesidir. Aşağıdaki örnekte bloğa 200px genişlik ve ayrıca kenarlık ve border verilmiştir. Bloğun gerçek genişliği 300px, ancak getComputedStyle yine de 200px çıktılayacak:

<div id="elem">metin</div>

#elem {
	width: 200px;
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // '200px' çıktılar
console.log('height: ' + style.height); // '200px' çıktılar

Yani: Görünüşe göre getComputedStyle blok genişlemesini görmezden geliyor ve onun boyutlarını genişleme yokmuş gibi gösteriyor. Ama hepsi bu kadar değil: ayrıca kaydırma çubuğunun bulunması veya bulunmaması da önem taşır - bazı tarayıcılar kaydırma çubuğunun genişliğini getComputedStyle ile hesaplanan genişlikten çıkarır, bazıları ise çıkarmaz. Kısacası burada her şey kesinlikle çapraz tarayıcı uyumlu değil ve genişlik ve yüksekliği belirlemek için getComputedStyle kullanmamak, bunun yerine biraz aşağıda inceleyeceğimiz metrikleri kullanmak daha iyidir.

Hesaplanan Değerler

Bir nüans daha var: eğer genişlik % olarak belirlenmişse - getComputedStyle çalıştıktan sonra onu px cinsinden göreceğiz. Yani aslında biz belirlenen genişliği değil, hesaplananı alıyoruz. Şu örneğe bakın:

<div id="elem">metin</div>

#elem {
	width: 30%; /* genişlik % olarak verildi */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

let elem = document.querySelector('#elem');

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // genişliği px cinsinden çıktılar

Ayrıca Bakınız

toplu olarak CSS stillerini belirleyen cssText özelliği,