CSS Dosyalarından JavaScript ile Özellik Okuma

CSS dosyasında tanımlanan özellikler, getComputedStyles adlı özel bir fonksiyon kullanılarak okunabilir.

Bunun nasıl yapıldığına bakalım. Şu öğeye sahip olduğumuzu varsayalım:

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

Bu öğe için aşağıdaki stillerin tanımlandığını varsayalım:

#elem {
	width: 100px;
	color: red;
	font-size: 20px;
}

Öğeye bir referansı değişkende alalım:

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

Şimdi, elde edilen öğeye referansı, getComputedStyles fonksiyonuna parametre olarak iletilim:

let computedStyle = getComputedStyle(elem);

Sonuç olarak, öğemiz için CSS özellik değerlerini içeren bir nesne elde ederiz. Bunu kullanarak, örneğin rengi okuyalım:

console.log(computedStyle.color); // 'red' yazdıracak

Şimdi genişliği:

console.log(computedStyle.width); // '100px' yazdıracak

Şimdi yazı tipi boyutunu:

console.log(computedStyle.fontSize); // '20px' yazdıracak

Öğe için aşağıdaki stiller tanımlanmıştır:

#elem {
	width: 200px;
	height: 200px;
}

Düğmeye tıklandığında öğenin genişliğini ve yüksekliğini yazdırın.

Öğe için aşağıdaki stiller tanımlanmıştır:

#elem {
	width: 200px;
	height: 200px;
}

Düğmeye tıklandığında öğenin genişliğini ve yüksekliğini iki katına çıkarın.