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:

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

css#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:

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

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

Результат:

Nümunə

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

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

css#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:

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

css#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.