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:

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

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

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

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

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

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

javascript 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:

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

Şimdi genişliği:

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

Şimdi yazı tipi boyutunu:

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

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

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