Fungsi getComputedStyle

Fungsi getComputedStyle membenarkan anda mendapatkan nilai sebarang sifat CSS elemen, walaupun dari fail CSS.

Sintaks

let objek = getComputedStyle(elemen);

Perincian

Bagaimana ia berfungsi (perhatian: tidak seperti yang kita jangkakan): parameternya fungsi menerima elemen, dan mengembalikan objek, yang mengandungi semua sifat CSS elemen yang diberikan. Mari letakkan objek ini dalam pembolehubah style. Namanya sewenang-wenangnya, ini hanya pembolehubah - bagaimana kita fikirkan, begitulah kita akan rujuk:

let elem = document.querySelector('#elem');
let style = getComputedStyle(elem); // dalam style terletak sifat CSS

Mari kita keluarkan, sebagai contoh, lebar. Ini dilakukan begini - style.width:

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

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

Untuk mengeluarkan, sebagai contoh, padding kiri - lakukan ini - style.paddingLeft:

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

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

Dalam contoh seterusnya kita akan mengeluarkan semua sifat CSS yang menarik minat kita untuk elemen kami:

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

Ketidaktepatan getComputedStyle

Kadang-kadang fungsi getComputedStyle berfungsi tidak begitu tepat dengan lebar dan tinggi. Ini berkaitan dengan fakta bahawa padding dan sempadan mengembangkan blok. Dalam contoh seterusnya, blok diberikan lebar 200px, serta sempadan dan border. Lebar sebenar blok ialah 300px, tetapi getComputedStyle tetap akan mengeluarkan 200px:

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

Iaitu: ternyata getComputedStyle mengabaikan pengembangan blok dan menunjukkan dimensinya seolah-olah pengembangan ini tidak wujud. Tetapi itu belum semua: kehadiran atau ketiadaan bar skrol juga penting - beberapa pelayar menolak lebar bar skrol dari lebar, yang dikira melalui getComputedStyle, dan beberapa tidak menolak. Secara umum di sini semuanya tidak merentas pelayar dan lebih baik getComputedStyle untuk menentukan lebar dan tinggi tidak digunakan, dan gunakan metrik, yang akan kita pelajari di bawah.

Nilai Terkira

Ada satu lagi nuansa: jika lebar diberikan dalam % - maka selepas kerja getComputedStyle kita akan melihat ia dalam px. Iaitu pada dasarnya kita tidak mendapat lebar yang diberikan, tetapi yang terkira. Lihat pada contoh seterusnya:

<div id="elem">text</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 mengeluarkan lebar dalam px

Lihat juga

sifat cssText,
yang memberikan gaya CSS secara pukal