HTML DOM Element offsetHeight ominaisuus

Määrittely ja käyttö

offsetHeight Ominaisuus palauttaa elementin näkyvän korkeuden (pikseleissä), mukaan lukien sisäänvedot, reunat ja pyöräytykset, mutta ei ulkopuolisia marginaaleja.

offsetHeight Ominaisuus on kirjoitussuojattu.

Katso myös:CSS-ruudukkomallin opetus

offsetParent

Kaikki lohkovälineet raportoivat siirtymät suhteessa siirtymäisäntään:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Siirtymäisäntä tarkoittaa lähintä isäntää, jolla on ei-statiivinen sijainti.

Jos ei ole olemassa siirtymäisäntä, siirtymä on suhteessa dokumentin sisällön.

Katso myös:

offsetWidth ominaisuus

offsetParent ominaisuus

offsetTop ominaisuus

offsetLeft ominaisuus

clientTop ominaisuus

clientLeft ominaisuus

clientWidth ominaisuus

clientHeight ominaisuus

Esimerkki

Esimerkki 1

Näytä "myDIV" korkeus ja leveys, mukaan lukien sisäänvedot ja reunat:

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

Kokeile itse

Esimerkki 2

clientHeight/clientWidth ja offsetHeight/offsetWidth ero

On kelkka:

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

Ei kelkkua:

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.offsetHeight

Palautusarvo

Tyyppi Kuvaus
Luku Elementin näkyvä korkeus (pikseleissä), mukaan lukien sisäinen reunaväli, reunaviiva ja kelkku.

Selaimen tuki

Kaikki selaimet tukevat element.offsetHeight:

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