Ultimele tutoriale de dezvoltare web
 

HTML DOM clientWidth Propery

<Element Object

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 clientWidth returnează 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 mare decât lățimea reală a elementului, această proprietate va reveni doar lățimea , 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 clientHeight 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
clientWidth da da da da da

Sintaxă

element .clientWidth

Detalii tehnice

Întoarcere Valoare: Un număr, reprezentând lățimea vizibilă a unui element în pixeli, inclusiv umplutură
Exemple

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 »

<Element Object