The offsetHeight je lastnost HTML DOM, ki jo uporablja programski jezik JavaScript. Vrne vidno višino elementa v slikovnih pikah, ki vključuje višino vidne vsebine, obrobo, oblazinjenje in drsni trak, če je prisoten. OffsetHeight se pogosto uporablja z lastnostjo offsetWidth. The offsetWidth je še ena lastnost HTML DOM, ki je skoraj enaka offsetHeight. Te lastnosti uporablja JavaScript za iskanje vidne višine in širine elementov HTML.
OffsetHeight je kombinacija naslednjih elementov HTML:
offsetHeight = height + border + padding + horizontal scrollbar
Po drugi strani pa offsetWidth vključuje naslednje elemente:
offsetWidth = width + border + padding + vertical scrollbar
Zapomnite si eno stvar, da offsetHeight in offsetWidth ne vključujeta roba, ne zgornjega ne spodnjega roba. Te lastnosti DOM uporablja programski jezik JavaScript za izračun dimenzije elementov HTML v slikovnih pikah.
S pomočjo spodnjega diagrama lahko veliko bolje razumete offsetHeight in offsetWidth:
Podpora za brskalnik
Lastnost offsetHeight DOM podpira več spletnih brskalnikov, kot sta Chrome in Internet Explorer. Sledi nekaj brskalnikov, ki podpirajo lastnosti offsetHeight in offsetWidth.
niz v json java
| Brskalnik |  Chrome |  internet Explorer |  Firefox |  Opera |  Safari |  Edge |
| podpora za offsetHeight | ja | ja | ja | ja | ja | ja |
Sintaksa
Spodaj je preprosta sintaksa offsetHeight:
element.offsetHeight
Tukaj je element spremenljivka, ustvarjena v JavaScriptu za shranjevanje vrednosti lastnosti CSS ali odstavka besedila HTML.
Povratne vrednosti
OffsetHeight in offsetWidth vrneta izračunano višino in širino elementov HTML v slikovnih pikah.
Primeri
Spodaj je seznam nekaj primerov. S pomočjo katerega bomo videli, kako se uporablja in deluje lastnost offsetHeight.
Primer 1
HTML DOM offsetHeight Property example #JTP { height: 120px; width: 250px; margin: 20px; padding: 15px; background-color: yellow; } function getInfo() { var eleValue = document.getElementById('JTP'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h2> HTML DOM offsetHeight Property example </h2> <b> A basic information about this div tab: </b> Submit Izhod
Oglejte si spodnji rezultat, ki vsebuje odstavek v rumeni barvi in gumb za oddajo. Kliknite na to Predloži in izračunajte offsetHeight tega odstavka.
Izhod, preden kliknete gumb Pošlji
isletter java
Izhod po kliku na gumb Pošlji
Izračunana offsetHeight bo prikazana znotraj tega rumeno označenega območja.
Primer 2
V tem primeru bomo izračunali offsetHeight za odstavek, naveden v tem primeru, skupaj s slogom CSS. Ne pozabite, da offsetHeight ne bo vključeval roba.
HTML DOM offsetHeight Property example #PStyle { height: 220px; width: 320px; margin: 20px; padding: 15px; background-color: pink; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 2 </h3> <p> In this example, we will calculate the offset height for this paragraph. We have also provided CSS styling to this paragraph. This offsetHeight will include the height of text, padding, border except margin taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight Izhod
Oglejte si spodnji rezultat, ki vsebuje odstavek v roza poudarjeni barvi in gumb za oddajo. Kliknite na to Izračunajte offsetHeight in izračunajte offsetHeight tega odstavka.
Izhod, preden kliknete gumb Izračunaj višino odmika
Izhod po kliku gumba Izračunaj višino odmika
Izračunana offsetHeight bo prikazana znotraj tega rožnato poudarjenega območja. Na spodnjem posnetku zaslona lahko vidite, da je offsetHeight za dani odstavek 230 slikovnih pik.
Primer 3 brez oblikovanja CSS
Oglejte si drug primer izračunavanja offsetHeight. Nismo vključili nobenega sloga CSS, kot so višina, širina, rob, oblazinjenje itd., pričakujte barvo ozadja. Torej bo odstavek preprost odstavek brez sloga.
HTML DOM offsetHeight Property example #PStyle { background-color: orange; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt = 'Height of the elements in paragraph calculated as pixels is: ' + eleValue.offsetHeight + 'px'; document.getElementById('sudo').innerHTML = txt; } <h3> HTML DOM offsetHeight Property Example 3 </h3> <p> In this example, we will calculate the offset height of this given paragraph. We have jusr included background color in CSS styling not height, width, margin, or padding to this paragraph. So, the offsetHeight will be calculted for the height of text taken by this paragraph. </p> <b> OffsetHeight of this div tab paragraph: </b> Calculate offsetHeight Izhod
niz in podniz
Oglejte si spodnji rezultat, ki vsebuje odstavek v oranžno označeni barvi in gumb za oddajo za izračun offsetHeight. Kliknite na to Izračunajte offsetHeight in izračunajte offsetHeight tega odstavka.
Preden kliknete gumb Izračunaj višino odmika
Po kliku na gumb Izračunaj višino odmika
Na spodnjem posnetku zaslona lahko vidite, da je offsetHeight za dani odstavek 88 slikovnih pik.
Izračunajte offsetHeight in offsetWidth
V tem primeru bomo izračunali oboje offsetHeight in offsetWidth za odstavek znotraj zavihka div. Tako lahko razumete, kako različno so računali. Tukaj bomo uporabili CSS in posredovali višino, širino, rob, oblazinjenje itd. za oblikovanje v tem primeru.
Kopirajte in zaženite spodnjo kodo v vašem sistemu za boljše razumevanje.
HTML DOM offsetHeight Property example #PStyle { height: 180px; width: 400px; margin: 20px; padding: 15px; background-color: lightblue; } function getInfo() { var eleValue = document.getElementById('PStyle'); var txt1 = 'OffsetHeight of the paragraph along with padding and border in pixels is: ' + eleValue.offsetHeight + 'px'; var txt2 = 'OffsetWidth of the paragraph along with padding and border in pixels is: ' + eleValue.offsetWidth + 'px'; document.getElementById('sudo1').innerHTML = txt1; document.getElementById('sudo2').innerHTML = txt2; } <h2> Calculation of offsetHeight and offsetWidth </h2> <b> A basic information about this div tab: </b> Submit Izhod
Oglejte si spodnji rezultat, ki vsebuje odstavek v svetlomodro poudarjenem barvnem območju in gumb za oddajo. Kliknite na to Predloži in izračunajte offsetHeight in offsetWidth tega odstavka.
Izhod, preden kliknete gumb Pošlji
Po kliku na Predloži izračunana višina odmika je 210 slikovnih pik, širina odmika pa 430 slikovnih pik, prikazanih znotraj tega svetlomodro poudarjenega območja. Glej izhod spodaj.
Izhod po kliku na gumb Pošlji
Videli ste več primerov z različnimi parametri za izračun. V teh različnih primerih smo posredovali besedilni odstavek s slogom CSS ali tudi brez njega in nato ločeno izračunali offsetHeight in offsetWidth.