El offsetHeight és una propietat HTML DOM, que s'utilitza pel llenguatge de programació JavaScript. Retorna l'alçada visible d'un element en píxels que inclou l'alçada del contingut visible, la vora, el farciment i la barra de desplaçament si n'hi ha. L'offsetHeight s'utilitza sovint amb la propietat offsetWidth. El offsetWidth és una propietat més d'HTML DOM, que és gairebé la mateixa que l'offsetHeight. JavaScript utilitza aquestes propietats per trobar l'alçada i l'amplada visibles dels elements HTML.
L'offsetHeight és una combinació dels següents elements HTML:
offsetHeight = height + border + padding + horizontal scrollbar
D'altra banda, l'offsetWidth inclou els elements següents:
offsetWidth = width + border + padding + vertical scrollbar
Recordeu una cosa que offsetHeight i offsetWidth no inclouen marge, ni marge superior ni marge inferior. Aquestes propietats DOM són utilitzades per Llenguatge de programació JavaScript per calcular la dimensió dels elements HTML en píxels.
Amb l'ajuda del diagrama següent, podeu entendre molt millor offsetHeight i offsetWidth:
millor hentai
Suport del navegador
La propietat offsetHeight DOM és compatible amb diversos navegadors web, com ara Chrome i Internet Explorer. A continuació es mostren alguns navegadors que admeten les propietats offsetHeight i offsetWidth.
| Navegador |  Chrome |  Internet Explorer |  Firefox |  Òpera |  Safari |  Edge |
| suport offsetHeight | Sí | Sí | Sí | Sí | Sí | Sí |
Sintaxi
A continuació es mostra una sintaxi senzilla de offsetHeight:
element.offsetHeight
Aquí, l'element és una variable creada en JavaScript per contenir els valors de les propietats CSS o el paràgraf de text HTML.
Valors de retorn
OffsetHeight i offsetWidth retornen l'alçada i l'amplada calculades dels elements HTML en píxels, respectivament.
Exemples
A continuació es mostra una llista d'alguns exemples. Amb l'ajuda del qual veurem com s'utilitza i funciona la propietat offsetHeight.
Exemple 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 Sortida
Vegeu la sortida següent que conté un paràgraf en color groc ressaltat i un botó d'enviament. Feu clic a això Presentar botó i calculeu l'alçada de compensació d'aquest paràgraf.
Sortida abans de fer clic al botó Envia
Sortida després de fer clic al botó Envia
L'alçada de compensació calculada es mostrarà dins d'aquesta àrea destacada en groc.
Exemple 2
En aquest exemple, calcularem el offsetHeight d'un paràgraf proporcionat en aquest exemple juntament amb l'estil CSS. Recordeu que l'offsetHeight no inclourà marge.
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 Sortida
Vegeu la sortida següent que conté un paràgraf en color rosat i un botó d'enviament. Feu clic a això Calcula l'altura de compensació botó i calculeu l'alçada de compensació d'aquest paràgraf.
Sortida abans de fer clic al botó Calcula l'alçada de compensació
Sortida després de fer clic al botó Calcula l'alçada de compensació
L'alçada de compensació calculada es mostrarà dins d'aquesta àrea destacada de color rosa. A la captura de pantalla següent, podeu veure que offsetHeight per al paràgraf donat és de 230 px.
què es connecta automàticament a java
Exemple 3 sense estil CSS
Vegeu un altre exemple de càlcul de l'offsetHeight. No hem inclòs cap estil CSS com alçada, amplada, marge, farciment, etc., esperem el color de fons. Per tant, el paràgraf serà un paràgraf senzill sense estil.
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 Sortida
caràcter d'escapament java
Vegeu la sortida següent que conté un paràgraf en color taronja ressaltat i un botó d'enviament per calcular l'alçada de compensació. Feu clic a això Calcula l'altura de compensació botó i calculeu l'alçada de compensació d'aquest paràgraf.
Abans de fer clic al botó Calcula l'alçada de compensació
Després de fer clic al botó Calcula l'alçada de compensació
A la captura de pantalla següent, podeu veure que offsetHeight per al paràgraf donat és de 88 píxels.
Calcula tant offsetHeight com offsetWidth
En aquest exemple, calcularem tots dos offsetHeight i offsetWidth per a un paràgraf dins d'una pestanya div. Per tant, podeu entendre com de diferent es van calcular. Aquí, utilitzarem CSS i passarem l'alçada, l'amplada, el marge, el farciment, etc. per a l'estil en aquest exemple.
Copieu i executeu el codi següent al vostre sistema per entendre-ho millor.
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 Sortida
Vegeu la sortida següent que conté un paràgraf a l'àrea de color ressaltat en blau clar i un botó d'enviament. Feu clic a això Presentar botó i calculeu el offsetHeight i el offsetWidth d'aquest paràgraf.
Sortida abans de fer clic al botó Envia
Després de fer clic a Presentar botó, l'alçada de compensació calculada és de 210 píxels i l'amplada de compensació és de 430 píxels que es mostra dins d'aquesta àrea ressaltada en blau clar. Vegeu la sortida a continuació.
Sortida després de fer clic al botó Envia
Heu vist diversos exemples amb diferents paràmetres de càlcul. En aquests diversos exemples, hem passat el paràgraf de text amb o també sense estil CSS i després hem calculat per separat l'alçada de desplaçament i l'amplada de desplaçament.