Ultimele tutoriale de dezvoltare web
 

HTML DOM offsetWidth Propery

<Element Object

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 offsetWidth returnează 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 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 offsetHeight 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
offsetWidth da da da da da

Sintaxă

element .offsetWidth

Detalii tehnice

Întoarcere Valoare: Un număr, reprezentând lățimea vizibilă a unui element în pixeli, inclusiv, chenarul și scrollbar
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