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:

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

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

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

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

Результат:

Pavyzdys

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

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

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

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

Результат:

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.