Fungsi getComputedStyle

Fungsi getComputedStyle memungkinkan Anda mendapatkan nilai dari properti CSS apa pun pada elemen, bahkan dari file CSS.

Sintaks

let objek = getComputedStyle(elemen);

Detail

Cara kerjanya (perhatian: tidak seperti yang kita harapkan): parameternya, fungsi menerima elemen, dan mengembalikan objek, yang berisi semua properti CSS dari elemen yang diberikan. Mari kita letakkan objek ini ke dalam variabel style. Namanya arbitrer, ini hanya variabel - terserah kita menamakannya, dan kita akan mengaksesnya seperti itu:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // CSS properties ada di dalam style

Mari kita tampilkan, misalnya, lebarnya. Ini dilakukan seperti ini - style.width:

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

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

Untuk menampilkan, misalnya, padding kiri - lakukan seperti ini - style.paddingLeft:

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

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

Pada contoh berikutnya kita akan menampilkan semua properti CSS yang kita minati untuk elemen kita:

<div id="elem">teks</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); // akan menampilkan '30px'
console.log('borderTopWidth: ' + style.borderTopWidth); // akan menampilkan '20px'
console.log('borderTopStyle: ' + style.borderTopStyle); // akan menampilkan 'solid'

Ketidakakuratan getComputedStyle

Terkadang fungsi getComputedStyle bekerja tidak sepenuhnya benar dengan lebar dan tinggi. Ini terkait dengan fakta bahwa padding dan border memperluas blok. Pada contoh berikutnya, blok diberikan lebar 200px, serta border dan border. Lebar blok sebenarnya 300px, tetapi getComputedStyle tetap akan menampilkan 200px:

<div id="elem">teks</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); // akan menampilkan '200px'
console.log('height: ' + style.height); // akan menampilkan '200px'

Artinya: ternyata getComputedStyle mengabaikan perluasan blok dan menunjukkan ukurannya seolah-olah perluasan itu tidak ada. Tapi itu belum semuanya: ada juga pengaruh dari ada atau tidaknya scroll bar - beberapa browser mengurangi lebar scroll bar dari lebar yang dihitung melalui getComputedStyle, dan beberapa tidak menguranginya. Singkatnya, di sini semuanya tidak cross-browser dan lebih baik getComputedStyle untuk menentukan lebar dan tinggi tidak digunakan, dan menggunakan metrik, yang akan kita pelajari sebentar lagi.

Nilai yang Dihitung

Ada satu nuansa lagi: jika lebar diberikan dalam % - maka setelah getComputedStyle bekerja, kita akan melihatnya dalam px. Artinya, pada dasarnya kita mendapatkan bukan lebar yang ditentukan, tetapi lebar yang dihitung. Lihatlah pada contoh berikut:

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

#elem {
	width: 30%; /* lebar diberikan dalam % */
	height: 200px;
	padding: 30px;
	border: 20px solid #BCBCBC;
	overflow: auto;
}

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

let style = getComputedStyle(elem);
console.log('width: ' + style.width); // akan menampilkan lebar dalam px

Lihat Juga

properti cssText,
yang mengatur gaya CSS secara massal