CSS elementlerini JavaScript üçin giňeltmek
CSS aýratynlyklaryny
width we
height
bellemek elementiň görkezilen ölçegde boljakdygyna kepilnama berenok. Geliň mysallar bilen göreliň.
Mysal
Häzir elementiň ölçegleri görkezilenleri bilen gabat gelýär:
<div id="elem">
text
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Mysal
Indi bolsa elemente
padding
aýratynlygyny bereliň. Netijede elementiň hakyky ini görkezilen içerki araçäk bahasyna köpelip giňener:
<div id="elem">
text
</div>
#elem {
padding: 25px;
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Mysal
Çäginiň bolmagy hem elementi giňeldýär:
<div id="elem">
text
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
border: 20px solid #F0D7A1;
}
:
Mysal
box-sizing
aýratynlygy ýokarda beýan edilen hereketi üýtgetmäge mümkinçilik berýär.
Içerki araçäk we çäg hem elementi giňeltmezlik etmek bolýar.
Bunun üçin bu aýratynlyga border-box bahasyny bermek gerek:
<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;
}
:
Beýan edilenleriň möhümdigi
JavaScript göz bilen beýan edilen ýagdaý örän amatly däl. Sebäbi width aýratynlygynyň bahasyny okap, elementiň edil şol ini boljakdygy barada ynamly bolup bilmeýäris.