CSS элементларини JavaScript учун кенгайтириш
CSS хоссалари
width ва
height
ни белгилаш элемент белгиланган ўлчамга эга бўлишини кафолатламайди. Келинг, мисолларда кўрамиз.
Мисол
Ҳозир элементнинг ўлчамлари белгиланганларга мос келади:
<div id="elem">
text
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Мисол
Энди эса элементга
padding хоссасини белгилаймиз.
Натижада элементнинг ҳақиқий эни катталашиб, ички чекманинг белгиланган қийматига кенгайadi:
<div id="elem">
text
</div>
#elem {
padding: 25px;
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Мисол
Чегаранинг мавжудлиги ҳам элементни кенгайтиради:
<div id="elem">
text
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
border: 20px solid #F0D7A1;
}
:
Мисол
box-sizing хоссаси
юқорида тавсифланган ҳат-ҳаракатни ўзгартиришга имкон беради.
На ички чекма, на чегара элементни кенгайтирмай қўйиш мумкин.
Бунинг учун унга border-box қийматини белгилаш керак:
<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;
}
:
Тавсифланган нарсанинг мухимлиги
JavaScript нуктан назаридан тавсифланган вазият жуда қулай эмас.
Аксинча, width хоссасининг қийматини ўқиб, биз элемент айнан шу энга эга бўлишига ишонч ҳосил қила олмаймиз.
