CSS элементларини JavaScript учун кенгайтириш

CSS хоссалари width ва height ни белгилаш элемент белгиланган ўлчамга эга бўлишини кафолатламайди. Келинг, мисолларда кўрамиз.

Мисол

Ҳозир элементнинг ўлчамлари белгиланганларга мос келади:

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

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

Результат:

Мисол

Энди эса элементга padding хоссасини белгилаймиз. Натижада элементнинг ҳақиқий эни катталашиб, ички чекманинг белгиланган қийматига кенгайadi:

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

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

Результат:

Мисол

Чегаранинг мавжудлиги ҳам элементни кенгайтиради:

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

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

Результат:

Мисол

box-sizing хоссаси юқорида тавсифланган ҳат-ҳаракатни ўзгартиришга имкон беради. На ички чекма, на чегара элементни кенгайтирмай қўйиш мумкин. Бунинг учун унга 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;
}

Результат:

Тавсифланган нарсанинг мухимлиги

JavaScript нуктан назаридан тавсифланган вазият жуда қулай эмас. Аксинча, width хоссасининг қийматини ўқиб, биз элемент айнан шу энга эга бўлишига ишонч ҳосил қила олмаймиз.