Elementu paplašināšana CSS priekš JavaScript

CSS īpašību width un height iestatīšana negarantē, ka elements iegūs noteiktu izmēru. Apskatīsim to ar piemēriem.

Piemērs

Šobrīd elementa izmēri sakrīt ar norādītajiem:

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

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

Результат:

Piemērs

Tagad piešķirsim elementam īpašību padding. Rezultātā faktiskais elementa platums kļūs lielāks un paplašināsies par norādīto vērtību iekšējās atstarpes:

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

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

Результат:

Piemērs

Arī apmales esamība paplašina elementu:

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

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

Результат:

Piemērs

Īpašība box-sizing ļauj mainīt iepriekš aprakstīto uzvedību. Var izdarīt tā, ka ne iekšējā atstarpe, ne apmale nepaplašinās elementu. Lai to izdarītu, šai īpašībai ir jāpiešķir vērtība border-box:

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

Результат:

Aprakstītā nozīmīgums

No JavaScript perspektīvas aprakstītā situācija nav īsti ērta. Galu galā izrādās, ka nolasot īpašības width vērtību, mēs nemaz nevaram būt pārliecināti, ka elements būs tieši šāda platuma.