Exemplu
Ia înălțimea și lățimea unui <div> Element, inclusiv padding și de frontieră:
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";
Rezultatul txt va fi:
Height with padding and border: 280px
Width with padding and border: 430px
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea offsetHeight returnează înălțimea vizibilă a unui element în pixeli, inclusiv, chenarul și scrollbar, dar nu marja.
Motivul pentru care "viewable" este specificat cuvântul, se datorează faptului că în cazul în care conținutul elementului este mai înalt decât înălțimea efectivă a elementului, această proprietate va reveni doar înălțimea pe care este vizibil (See "More Examples") A se (See "More Examples") .
Notă: Pentru a înțelege această proprietate, trebuie să înțelegeți CSS Box model .
Sfat: Această proprietate este adesea folosit împreună cu offsetWidth proprietate.
Sfat: Utilizați clientHeight și clientWidth proprietăți pentru a reveni înălțimea vizibilă și lățimea unui element, numai inclusiv padding.
Indicație: Pentru a adăuga scrollbar la un element, utilizați CSS overflow proprietate.
Această proprietate este read-only.
Suport pentru browser-
Proprietate | |||||
---|---|---|---|---|---|
offsetHeight | da | da | da | da | da |
Sintaxă
element .offsetHeight
Detalii tehnice
Întoarcere Valoare: | Un număr, care reprezintă înălțimea vizibilă a unui element în pixeli, inclusiv, chenarul și scrollbar |
---|
Mai multe exemple
Exemplu
Acest exemplu demonstrează diferența dintre 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";
Rezultatul txt va fi:
Height with padding: 270px
Height with padding and border:
280px
Width with padding: 420px
Width with padding and
border: 430px
Încearcă - l singur » Exemplu
Acest exemplu demonstrează diferența dintre clientHeight / clientWidth și offsetHeight / offsetWidth, atunci când vom adăuga o bară de derulare la elementul:
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";
Rezultatul txt va fi:
Height with padding: 249px
Height with padding, border and
scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
Încearcă - l singur »