Pengembangan Elemen dalam CSS untuk JavaScript

Menetapkan sifat CSS width dan height tidak menjamin bahawa elemen akan menjadi saiz yang ditetapkan. Mari kita lihat pada contoh.

Contoh

Sekarang saiz elemen sepadan dengan yang ditetapkan:

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

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

Contoh

Sekarang mari kita tetapkan sifat padding kepada elemen. Hasilnya, lebar sebenar elemen akan menjadi lebih besar dan berkembang pada nilai yang ditetapkan jarak dalam:

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

#elem {
	padding: 25px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
}

Contoh

Kehadiran sempadan juga mengembangkan elemen:

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

#elem {
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

Contoh

Sifat box-sizing membolehkan kita mengubah tingkah laku yang diterangkan di atas. Kita boleh membuat supaya sama ada jarak dalam, atau sempadan tidak mengembangkan elemen. Untuk itu, sifat ini perlu ditetapkan nilai border-box:

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

#elem {
	box-sizing: border-box;
	padding: 20px;
	width: 200px;
	height: 200px;
	margin: 50px auto;
	background: #CFF5BF;
	border: 20px solid #F0D7A1;
}

Kepentingan yang diterangkan

Dari sudut pandangan JavaScript, situasi yang diterangkan agak tidak selesa. Ini kerana, setelah membaca nilai sifat width, kita sama sekali tidak boleh yakin bahawa elemen akan mempunyai lebar tersebut.