Neueste Web-Entwicklung Tutorials
 

HTML DOM offsetWidth Propery

<Element Object

Beispiel

Holen Sie die Höhe und Breite eines <div> Element, einschließlich Polsterung und Grenze:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

Das Ergebnis der txt wird:

Height with padding and border: 280px
Width with padding and border: 430px
Versuch es selber "

Mehr "Try it Yourself" Sie "Try it Yourself" Beispiele unten.

Definition und Verwendung

Die offset Eigenschaft gibt die sichtbare Breite eines Elements in Pixeln, einschließlich padding, Grenz- und scrollbar, aber nicht den Rand.

Der Grund , warum die "viewable" Wort angegeben ist, liegt daran , dass , wenn der Inhalt des Elements breiter als die tatsächliche Breite des Elements ist, wird diese Eigenschaft nur die Breite zurück , die sichtbar ist (See "More Examples") .

Hinweis: Um diese Eigenschaft zu verstehen, müssen Sie das verstehen CSS - Box - Modell .

Tipp: Diese Eigenschaft oft verwendet wird , zusammen mit der offset Eigenschaft.

Tipp: Verwenden Sie die Clientheight und client Eigenschaften der sichtbaren Höhe und der Breite eines Elements zurückkehren, nur die Polsterung einschließlich.

Tipp: Um die Bildlaufleisten zu einem Elemente hinzuzufügen, die CSS - Überlauf - Eigenschaft.

Diese Eigenschaft ist schreibgeschützt.

Browser-Unterstützung

Eigentum
offsetWidth Ja Ja Ja Ja Ja

Syntax

element .offsetWidth

Technische Details

Rückgabewert: Eine Zahl ist, die sichtbare Breite eines Elements in Pixeln darstellt, einschließlich padding, Grenz- und scrollbar
Beispiele

Mehr Beispiele

Beispiel

Dieses Beispiel zeigt den Unterschied zwischen client / client und offset / offset:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

Das Ergebnis der txt wird:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Versuch es selber "

Beispiel

Dieses Beispiel zeigt den Unterschied zwischen client / client und offset / offset, wenn wir eine Scrollbar mit dem Element hinzu:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

Das Ergebnis der txt wird:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Versuch es selber "

<Element Object