Elementų išplėtimas CSS naudojant JavaScript

CSS savybių width ir height nustatymas negarantuoja, kad elementas įgaus nurodytus matmenis. Pažiūrėkime pavyzdžiais.

Pavyzdys

Dabar elemento matmenys sutampa su nurodytais:

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

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

Pavyzdys

Dabar nustatykime elemento savybę padding. Dėl to faktinis elemento plotis taps didesnis ir išsiplės pagal nurodytą vertę vidinio atitraukimo:

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

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

Pavyzdys

Kraštinės buvimas taip pat išplečia elementą:

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

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

Pavyzdys

Savybė box-sizing leidžia keisti aukščiau aprašytą elgesį. Galima pasiekti, kad nei vidinis atitraukimas, nei kraštinė neišplėstų elemento. Tam šiai savybei reikia nustatyti reikšmę 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;
}

Aprašyto svarba

Iš JavaScript perspektyvos aprašyta situacija nėra labai patogi. Juk pasirodo, kad nuskaitę savybės width reikšmę mes visiškai negalime būti tikri, kad elementas bus būtent tokio pločio.