Style height-Eigenschaft
Style-Objekt
Definition und Verwendung
Die height-Eigenschaft legt die Höhe eines Elements fest oder gibt sie zurück.
Die height-Eigenschaft wirkt sich nur auf Block-Level-Elemente oder Elemente mit absoluter/fester Positionierung aus. Überfließender Inhalt kann durch die overflow-Eigenschaft begrenzt werden.
Syntax
Die height-Eigenschaft festlegen:
Object.style.height="auto|length|%|inherit"
Die height-Eigenschaft zurückgeben:
Object.style.height
| Wert | Beschreibung |
|---|---|
| auto | Standard. Die vom Browser festgelegte Höhe. |
| length | Definiert die Höhe in Einheiten wie px, cm. |
| % | Definiert die Höhe als Prozentsatz des Elternelements. |
| inherit | Der Wert der height-Eigenschaft wird vom Elternelement geerbt. |
Browser-Unterstützung
![]()
![]()
![]()
![]()
![]()
Alle wichtigen Browser unterstützen die height-Eigenschaft.
Hinweis:IE7 und frühere Versionen unterstützen den Wert "inherit" nicht. IE8 unterstützt "inherit" nur, wenn ein !DOCTYPE angegeben ist. IE9 unterstützt "inherit".
Beispiel
Beispiel
Legen Sie die Höhe einer Schaltfläche fest:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function displayResult(){
document.getElementById("b1").style.height="50px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="displayResult()" value="Buttonhöhe ändern">
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Example(example.com)</title>
<script>
function displayResult(){
document.getElementById("b1").style.height="50px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="displayResult()" value="Buttonhöhe ändern">
</body>
</html>
Selbst ausprobieren »
Style-Objekt Weitere Erweiterungen