The offsetHeight este o proprietate HTML DOM, care este folosită de limbajul de programare JavaScript. Returnează înălțimea vizibilă a unui element în pixeli, care include înălțimea conținutului vizibil, chenarul, căptușeala și bara de defilare, dacă este prezentă. OffsetHeight este adesea folosit cu proprietatea offsetWidth. The offsetWidth este încă o proprietate a HTML DOM, care este aproape aceeași cu offsetHeight. Aceste proprietăți sunt folosite de JavaScript pentru a găsi înălțimea și lățimea vizibile ale elementelor HTML.
OffsetHeight este o combinație de următoarele elemente HTML:
offsetHeight = height + border + padding + horizontal scrollbar
Pe de altă parte, offsetWidth include următoarele elemente:
offsetWidth = width + border + padding + vertical scrollbar
Amintiți-vă un lucru că offsetHeight și offsetWidth nu includ marginea, nici marginea superioară, nici marginea inferioară. Aceste proprietăți DOM sunt utilizate de Limbajul de programare JavaScript pentru a calcula dimensiunea elementelor HTML în pixeli.
Cu ajutorul diagramei de mai jos puteți înțelege offsetHeight și offsetWidth mult mai bine:
matrice în programarea c
Suport pentru browser
Proprietatea offsetHeight DOM este acceptată de mai multe browsere web, cum ar fi Chrome și Internet Explorer. Mai jos sunt câteva browsere care acceptă proprietățile offsetHeight și offsetWidth.
| Browser |  Crom |  Internet Explorer |  Firefox |  Operă |  Safari |  Margine |
| suport offsetHeight | da | da | da | da | da | da |
Sintaxă
Mai jos este o sintaxă simplă a offsetHeight:
element.offsetHeight
Aici, elementul este o variabilă creată în JavaScript pentru a păstra valorile proprietăților CSS sau paragraful text HTML.
Valori returnate
OffsetHeight și offsetWidth returnează înălțimea și lățimea calculate ale elementelor HTML în pixeli.
Exemple
Mai jos este o listă cu câteva exemple. Cu ajutorul căruia vom vedea cum este utilizată și cum funcționează proprietatea offsetHeight.
Exemplul 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 Ieșire
Vedeți rezultatul de mai jos, care conține un paragraf în culoarea galben evidențiată și un buton de trimitere. Faceți clic pe aceasta Trimite butonul și calculați offsetHeight din acest paragraf.
Ieșire înainte de a face clic pe butonul Trimitere
Ieșire după ce faceți clic pe butonul Trimitere
Înălțimea compensată calculată se va afișa în interiorul acestei zone evidențiate cu galben.
Exemplul 2
În acest exemplu, vom calcula offsetHeight pentru un paragraf furnizat în acest exemplu împreună cu stilul CSS. Rețineți că offsetHeight nu va include marja.
data curentă în java
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 Ieșire
Vedeți rezultatul de mai jos, care conține un paragraf în culoarea roz evidențiată și un buton de trimitere. Faceți clic pe aceasta Calculați offsetHeight butonul și calculați offsetHeight din acest paragraf.
Ieșire înainte de a face clic pe butonul Calculate offsetHeight
Ieșire după ce faceți clic pe butonul Calculate offsetHeight
Înălțimea compensată calculată se va afișa în interiorul acestei zone evidențiate roz. În captura de ecran de mai jos, puteți vedea că offsetHeight pentru paragraful dat este de 230px.
Exemplul 3 fără stil CSS
Vedeți un alt exemplu de calcul al offsetHeight. Nu am inclus niciun stil CSS cum ar fi înălțimea, lățimea, marginea, umplutura etc., așteptați culoarea de fundal. Deci, paragraful va fi un paragraf simplu, fără stil.
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 Ieșire
ce este desktop ini
Vedeți rezultatul de mai jos, care conține un paragraf în culoare portocalie evidențiată și un buton de trimitere pentru a calcula înălțimea decalajului. Faceți clic pe aceasta Calculați offsetHeight butonul și calculați offsetHeight din acest paragraf.
Înainte de a face clic pe butonul Calculate offsetHeight
După ce faceți clic pe butonul Calculate offsetHeight
În captura de ecran de mai jos, puteți vedea că offsetHeight pentru paragraful dat este de 88px.
Calculați atât offsetHeight, cât și offsetWidth
În acest exemplu, le vom calcula pe ambele offsetHeight și offsetWidth pentru un paragraf dintr-o filă div. Deci, puteți înțelege cât de diferit au calculat. Aici, vom folosi CSS și vom trece înălțimea, lățimea, marginea, umplutura etc. pentru stil în acest exemplu.
Copiați și rulați codul de mai jos pe sistemul dvs. pentru a înțelege mai bine.
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 Ieșire
variabile globale javascript
Vedeți rezultatul de mai jos, care conține un paragraf în zona de culoare albastru deschis și un buton de trimitere. Faceți clic pe aceasta Trimite butonul și calculați offsetHeight și offsetWidth din acest paragraf.
Ieșire înainte de a face clic pe butonul Trimitere
După ce faceți clic pe Trimite butonul, offsetHeight calculată este de 210 px, iar offsetWidth este de 430 px afișat în interiorul acestei zone evidențiate în albastru deschis. Vedeți rezultatul de mai jos.
Ieșire după ce faceți clic pe butonul Trimitere
Ați văzut mai multe exemple cu parametri de calcul diferiți. În aceste diverse exemple, am trecut paragraful de text cu sau fără stil CSS și apoi am calculat separat offsetHeight și offsetWidth.