Exemplu
Ia înălțimea și lățimea unui <div> Element, inclusiv padding:
var elmnt = document.getElementById("myDIV");
var txt =
"Height with padding: " + elmnt.clientHeight + "px<br>";
txt +=
"Width with padding: " + elmnt.clientWidth + "px";
Rezultatul txt va fi:
Height with padding: 270px
Width with padding: 420px
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea clientHeight returnează înălțimea vizibilă a unui element în pixeli, inclusiv umplutură, dar nu de frontieră, sau o marjă de derulare.
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 clientWidth proprietate.
Sfat: Utilizați offsetHeight și offsetWidth proprietăți pentru a reveni înălțimea vizibilă și lățimea unui element, inclusiv, chenarul și scrollbar.
Indicație: Pentru a adăuga scrollbar la un element, utilizați CSS overflow proprietate.
Această proprietate este read-only.
Suport pentru browser-
Proprietate | |||||
---|---|---|---|---|---|
clientHeight | da | da | da | da | da |
Sintaxă
element .clientHeight
Detalii tehnice
Întoarcere Valoare: | Un număr, care reprezintă înălțimea vizibilă a unui element în pixeli, inclusiv umplutură |
---|
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 »