Najnowsze tutoriale tworzenie stron internetowych
 

HTML DOM offsetHeight Propery

<Element Przedmiot

Przykład

Uzyskaj wysokość i szerokość <div> elementu, w tym wyściółka i obramowania:

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";

Wynikiem txt będą:

Height with padding and border: 280px
Width with padding and border: 430px
Spróbuj sam "

Więcej "Try it Yourself" przykłady poniżej.

Definicja i Wykorzystanie

Nieruchomość offsetHeight zwraca widoczny wysokość elementu w pikselach, w tym dopełnienie, obramowanie i przewijania, ale nie margines.

Powodem, dla którego "viewable" słowo jest określona, dlatego jeśli zawartość elementu jest wyższa niż rzeczywista wysokość elementu, ta właściwość zwróci jedynie wysokość, która jest widoczna (See "More Examples") .

Uwaga: Aby zrozumieć tę właściwość, musisz zrozumieć Box CSS model .

Wskazówka: Ta właściwość jest często używany wraz z offsetWidth nieruchomości.

Ważne: Z clientHeight i clientWidth właściwości powrotu wysokości widzialnego i szerokości elementu, w tym jedynie wyściółki.

Wskazówka: Aby dodać paski przewijania do elementu, należy użyć CSS przepełnienia nieruchomości.

Ta właściwość jest tylko do odczytu.

Wsparcie przeglądarka

Nieruchomość
offsetHeight tak tak tak tak tak

Składnia

element .offsetHeight

Szczegóły techniczne

Zwracana wartość: Numer, reprezentujący widoczny wysokość elementu w pikselach, w tym dopełnienie, obramowanie i przewijania
Przykłady

Więcej przykładów

Przykład

Przykład ten pokazuje różnicę pomiędzy clientHeight / clientWidth i 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";

Wynikiem txt będą:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
Spróbuj sam "

Przykład

Przykład ten pokazuje różnicę pomiędzy clientHeight / clientWidth i offsetHeight / offsetWidth, gdy dodamy do 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";

Wynikiem txt będą:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Spróbuj sam "

<Element Przedmiot