HTML DOM offsetWidth Property
Przykład
Pobierz wysokość i szerokość elementu <div>, w tym dopełnienie i obramowanie:
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";
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość offsetWidth zwraca widoczną szerokość elementu w pikselach, w tym dopełnienie, obramowanie i pasek przewijania, ale nie margines.
Powodem, dla którego określono słowo „widoczne”, jest to, że jeśli zawartość elementu jest szersza niż rzeczywista szerokość elementu, ta właściwość zwróci tylko widoczną szerokość (patrz „Więcej przykładów”).
Uwaga: aby zrozumieć tę właściwość, musisz zrozumieć CSS Box Model .
Wskazówka: ta właściwość jest często używana razem z właściwością offsetHeight .
Wskazówka: Użyj właściwości clientHeight i clientWidth , aby zwrócić widoczną wysokość i szerokość elementu, z uwzględnieniem tylko dopełnienia.
Wskazówka: Aby dodać paski przewijania do elementu, użyj właściwości CSS overflow .
Ta właściwość jest tylko do odczytu.
Obsługa przeglądarki
Property | |||||
---|---|---|---|---|---|
offsetWidth | Yes | Yes | Yes | Yes | Yes |
Składnia
element.offsetWidth
Szczegóły techniczne
Wartość zwrotu: | Liczba reprezentująca widoczną szerokość elementu w pikselach, w tym dopełnienie, obramowanie i pasek przewijania |
---|
Więcej przykładów
Przykład
Ten przykład pokazuje różnicę między clientHeight/clientWidth a offsetHeight/offsetWidth:
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";
Przykład
Ten przykład pokazuje różnicę między clientHeight/clientWidth a offsetHeight/offsetWidth, gdy dodamy pasek przewijania do elementu:
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";