Style width -Eigenschaft
Beispiel
Legen Sie die Breite eines <button>-Elements fest:
document.getElementById("myBtn").style.width = "300px";
Definition und Verwendung
Die Eigenschaft width legt die Breite eines Elements fest oder gibt sie zurück.
Die width-Eigenschaft wirkt sich nur auf Block-Level-Elemente oder auf Elemente mit absoluter oder fester Position aus. Der überlaufende Inhalt kann mit der Overflow-Eigenschaft manipuliert werden.
Tipp: Verwenden Sie die Eigenschaft height , um die Höhe eines Elements festzulegen oder zurückzugeben.
Browser-Unterstützung
| Property | |||||
|---|---|---|---|---|---|
| width | Yes | Yes | Yes | Yes | Yes |
Syntax
Geben Sie die width-Eigenschaft zurück:
object.style.width
Legen Sie die Breiteneigenschaft fest:
object.style.width = "auto|length|%|initial|inherit"
Eigenschaftswerte
| Value | Description |
|---|---|
| auto | The browser sets the width. This is default |
| length | Defines the width in length units |
| % | Defines the width in % of the parent element |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technische Details
| Standardwert: | Auto |
|---|---|
| Rückgabewert: | Ein String, der die Breite eines Elements darstellt |
| CSS-Version | CSS1 |
Mehr Beispiele
Beispiel
Ändern Sie die Breite eines <div>-Elements:
document.getElementById("myDIV").style.width = "500px";
Beispiel
Ändern Sie die Höhe und Breite eines <img>-Elements:
document.getElementById("myImg").style.height = "300px";
document.getElementById("myImg").style.width = "300px";
Beispiel
Gibt die Breite eines <img>-Elements zurück:
alert(document.getElementById("myImg").style.width);
Verwandte Seiten
CSS-Tutorial: CSS-Dimension
CSS-Tutorial: CSS-Box-Modell
CSS-Referenz: width-Eigenschaft
❮ Style-Objekt