HTML DOM Element offsetWidth-ominaisuus

Määrittely ja käyttö

offsetWidth Ominaisuus palauttaa elementin näkyvän leveyden (pikseleinä), mukaan lukien sisennykset, reunaviivat ja pyörivityöt, mutta ei ulkoisilla margineilla.

offsetWidth Ominaisuus on lukuominaisuus.

Katso myös:CSS-ruudukkomallin oppitunti

offsetParent

Kaikki lohkoelementit raportoivat etäisyyden suhteessa sijainnintään:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Sijainnintä tarkoittaa lähintä ei-statiivista sijaintia omaavaa isäntälajia.

Jos sijainnintä ei ole, sijainti on suhteessa dokumentin runkoon.

Katso myös:

offsetHeight-ominaisuus

offsetParent-ominaisuus

offsetTop-ominaisuus

offsetLeft-ominaisuus

clientTop-ominaisuus

clientLeft-ominaisuus

clientWidth-ominaisuus

clientHeight-ominaisuus

Esimerkki

Esimerkki 1

Hanki "myDIV"-divin korkeus ja leveys, mukaan lukien sisennykset ja reunaviivat:

const elmnt = document.getElementById("myDIV");
let text = "Korkeus sisältäen sisennyksen ja reunaviivan: " + elmnt.offsetHeight + "px<br>";
text += "Width with padding and border: " + elmnt.offsetWidth + "px";

Kokeile itse

Esimerkki 2

clientHeight/clientWidth ja offsetHeight/offsetWidth ero

Ilman vierityspalkkia:

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";

Kokeile itse

Vierityspalkki:

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";

Kokeile itse

Syntaksi

element.offsetWidth

Palautusarvo

Tyyppi Kuvaus
Luku Elementin näkyvä leveys (pikseleissä), mukaan lukien sisennykset, reunat ja vierityspalkit.

Selaimen tuki

Kaikki selaimet tukevat element.offsetWidth:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki Tuki