Najnowsze tutoriale tworzenie stron internetowych
 

HTML DOM clientHeight Propery

<Element Przedmiot

Przykład

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

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

Wynikiem txt będą:

Height with padding: 270px
Width with padding: 420px
Spróbuj sam "

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

Definicja i Wykorzystanie

Nieruchomość clientHeight zwraca widoczny wysokość elementu w pikselach, w tym obicia, ale nie granicy, przewijania lub marginesu.

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 clientWidth nieruchomości.

Wskazówka: Użyj offsetHeight i offsetWidth właściwości, aby powrócić wysokość i szerokość widocznego elementu, w tym dopełnienie, obramowanie i przewijania.

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ść
clientHeight tak tak tak tak tak

Składnia

element .clientHeight

Szczegóły techniczne

Zwracana wartość: Numer, reprezentujący widoczny wysokość elementu w pikselach, w tym wyściółka
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