CSS-də elementlərin JavaScript üçün genişləndirilməsi

CSS xassələrindən width və height təyin etmək elementin verilmiş ölçüdə olacağını zəmanət etmir. Gəlin nümunələrə baxaq.

Nümunə

Hal-hazırda elementin ölçüləri verilənlərlə eynidir:

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

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

Nümunə

İndi isə gəlin elementə padding xassəsi təyin edək. Nəticədə elementin real eni daha böyük olacaq və daxili boşluğun verilmiş dəyəri qədər genişlənəcək:

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

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

Nümunə

Sərhədin olması da elementi genişləndirir:

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

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

Nümunə

box-sizing xassəsi yuxarıda təsvir edilmiş davranışı dəyişməyə imkan verir. Elə etmək olar ki, nə daxili boşluq, nə də sərhəd elementi genişləndirməsin. Bunun üçün bu xassəyə border-box dəyəri təyin edilməlidir:

<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;
}

Təsvir edilənin əhəmiyyəti

JavaScript baxımından təsvir edilən vəziyyət çox da rahat deyil. Axı belə çıxır ki, width xassəsinin dəyərini oxuduqda elementin tam olaraq bu endə olacağına əmin ola bilmirik.