Erweiterung von Elementen in CSS für JavaScript
Das Setzen der CSS-Eigenschaften
width und
height
garantiert nicht, dass das Element die
angegebene Größe annimmt. Schauen wir uns das
an Beispielen an.
Beispiel
Jetzt stimmen die Abmessungen des Elements mit den vorgegebenen überein:
<div id="elem">
text
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Beispiel
Jetzt weisen wir dem Element die Eigenschaft
padding zu.
Als Ergebnis wird die tatsächliche Breite des Elements
größer und erweitert sich um den angegebenen Wert
des Innenabstands:
<div id="elem">
text
</div>
#elem {
padding: 25px;
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
}
:
Beispiel
Das Vorhandensein eines Rahmens erweitert das Element ebenfalls:
<div id="elem">
text
</div>
#elem {
width: 200px;
height: 200px;
margin: 50px auto;
background: #CFF5BF;
border: 20px solid #F0D7A1;
}
:
Beispiel
Die Eigenschaft box-sizing
ermöglicht es, das oben beschriebene Verhalten zu ändern.
Man kann bewirken, dass weder der Innenabstand
noch der Rahmen das Element erweitern.
Dafür muss dieser Eigenschaft
der Wert border-box zugewiesen werden:
<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;
}
:
Bedeutung des Beschriebenen
Aus der Sicht von JavaScript ist die beschriebene Situation
nicht sehr praktisch. Denn es stellt sich heraus, dass wir,
wenn wir den Wert der Eigenschaft width auslesen,
keineswegs sicher sein können, dass das Element
genau diese Breite haben wird.
