Atrybut offsetHeight Elementu DOM HTML

Definicja i użycie

offsetHeight Atrybut zwraca widoczną wysokość elementu (w pikselach), w tym wewnętrzne marginesy, ramkę i paski przewijania, ale bez zewnętrznych marginesów.

offsetHeight Atrybut jest jedynie do odczytu.

Zobacz również:Kurs CSS Framework

offsetParent

Wszystkie blokowe elementy raportują offset względem rodzica offset:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Rodzic offset to najbliższy przodek o niestatycznej lokalizacji.

Jeśli brak jest rodzica offset, offset jest względny do treści dokumentu.

Zobacz również:

Atrybut offsetWidth

Atrybut offsetParent

Atrybut offsetTop

Atrybut offsetLeft

Atrybut clientTop

Atrybut clientLeft

Atrybut clientWidth

Atrybut clientHeight

Przykład

Przykład 1

Wyświetla wysokość i szerokość "myDIV", w tym wewnętrzne marginesy i ramkę:

const elmnt = document.getElementById("myDIV");
let text = "Wysokość z wypełnieniem i ramką: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Spróbuj sam

Przykład 2

Różnica między clientHeight/clientWidth a offsetHeight/offsetWidth

Z paskiem przewijania:

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

Spróbuj sam

Bez paska przewijania:

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

Spróbuj sam

Gramatyka

element.offsetHeight

Zwracana wartość

Typ Opis
Numer Widoczna wysokość elementu (w pikselach), w tym wewnętrzne marginesy, ramki i paski przewijania.

Wspierane przeglądarki

Wszystkie przeglądarki wspierają element.offsetHeight:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie