HTML DOM offsetHeight 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ść offsetHeight zwraca widoczną wysokość 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 wyższa niż rzeczywista wysokość elementu, ta właściwość zwróci tylko widoczną wysokość (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ą offsetWidth .
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 | |||||
|---|---|---|---|---|---|
| offsetHeight | Yes | Yes | Yes | Yes | Yes |
Składnia
element.offsetHeight
Szczegóły techniczne
| Wartość zwrotu: | Liczba reprezentująca widoczną wysokość 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";