De offsetHoogte is een HTML DOM-eigenschap, die wordt gebruikt door de programmeertaal JavaScript. Het retourneert de zichtbare hoogte van een element in pixels, inclusief de hoogte van de zichtbare inhoud, rand, opvulling en schuifbalk, indien aanwezig. De offsetHeight wordt vaak gebruikt met de eigenschap offsetWidth. De offsetBreedte is nog een eigenschap van HTML DOM, die bijna hetzelfde is als de offsetHeight. Deze eigenschappen worden door JavaScript gebruikt om de zichtbare hoogte en breedte van de HTML-elementen te vinden.
De offsetHeight is een combinatie van de volgende HTML-elementen:
offsetHeight = height + border + padding + horizontal scrollbar
Aan de andere kant bevat de offsetWidth de volgende elementen:
offsetWidth = width + border + padding + vertical scrollbar
Onthoud één ding: offsetHeight en offsetWidth omvatten geen marge, noch bovenmarge, noch ondermarge. Deze DOM-eigenschappen worden gebruikt door JavaScript-programmeertaal om de afmeting van HTML-elementen in pixels te berekenen.
Met behulp van onderstaand diagram kunt u offsetHeight en offsetWidth veel beter begrijpen:
Browser-ondersteuning
De offsetHeight DOM-eigenschap wordt ondersteund door verschillende webbrowsers, zoals Chrome en Internet Explorer. Hieronder volgen enkele browsers die de eigenschap offsetHeight en offsetWidth ondersteunen.
| Browser |  Chroom |  Internet Explorer |  Firefox |  Opera |  Safari |  Rand |
| offsetHoogtesteun | Ja | Ja | Ja | Ja | Ja | Ja |
Syntaxis
Hieronder vindt u een eenvoudige syntaxis van offsetHeight:
element.offsetHeight
Hier is het element een variabele die in JavaScript is gemaakt om de waarden van de CSS-eigenschappen of de HTML-tekstparagraaf vast te houden.
Waarden retourneren
De offsetHeight en offsetWidth retourneren respectievelijk de berekende hoogte en breedte van de HTML-elementen in pixels.
Voorbeelden
Hieronder vindt u een lijst met enkele voorbeelden. Met behulp hiervan zullen we zien hoe de eigenschap offsetHeight wordt gebruikt en werkt.
voorbeeld 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 Uitvoer
Zie de onderstaande uitvoer met een alinea in geel gemarkeerde kleur en een verzendknop. Klik hierop Indienen knop en bereken de offsetHoogte van deze paragraaf.
Uitvoer voordat u op de knop Verzenden klikt
Uitvoer na het klikken op de knop Verzenden
De berekende offsethoogte wordt binnen dit geel gemarkeerde gebied weergegeven.
Voorbeeld 2
In dit voorbeeld berekenen we de offsetHeight voor een alinea uit dit voorbeeld, samen met CSS-stijl. Houd er rekening mee dat de offsetHeight geen marge bevat.
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 Uitvoer
cobol-programmering
Zie de onderstaande uitvoer met een paragraaf in roze gemarkeerde kleur en een verzendknop. Klik hierop Bereken de offsethoogte knop en bereken de offsetHoogte van deze paragraaf.
Voer de uitvoer uit voordat u op de knop Offsethoogte berekenen klikt
Uitvoer na het klikken op de knop Offsethoogte berekenen
De berekende offsethoogte wordt binnen dit roze gemarkeerde gebied weergegeven. In de onderstaande schermafbeelding ziet u dat offsetHeight voor de gegeven paragraaf 230px is.
Voorbeeld 3 zonder CSS-stijl
Zie een ander voorbeeld van het berekenen van de offsetHeight. We hebben geen CSS-stijlen zoals hoogte, breedte, marge, opvulling, enz. opgenomen, behalve achtergrondkleur. De paragraaf zal dus een eenvoudige paragraaf zijn zonder stijl.
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 Uitvoer
q4 maanden
Zie de onderstaande uitvoer met een paragraaf in oranje gemarkeerde kleur en een verzendknop om de offsetHeight te berekenen. Klik hierop Bereken de offsethoogte knop en bereken de offsetHoogte van deze paragraaf.
Voordat u op de knop Offsethoogte berekenen klikt
Nadat u op de knop Offsethoogte berekenen hebt geklikt
In de onderstaande schermafbeelding ziet u dat offsetHeight voor de gegeven paragraaf 88px is.
Bereken zowel offsetHeight als offsetWidth
In dit voorbeeld berekenen we beide offsetHoogte En offsetBreedte voor een alinea binnen een div-tabblad. U kunt dus begrijpen hoe verschillend ze hebben berekend. Hier gebruiken we CSS en geven we de hoogte, breedte, marge, opvulling, enz. door voor de stijl in dit voorbeeld.
Kopieer en voer de onderstaande code uit op uw systeem om het beter te begrijpen.
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 Uitvoer
Zie de onderstaande uitvoer met een alinea in een lichtblauw gemarkeerd kleurgebied en een verzendknop. Klik hierop Indienen en bereken de offsetHeight en offsetWidth van deze paragraaf.
Uitvoer voordat u op de knop Verzenden klikt
Na het klikken op de Indienen knop, de berekende offsetHeight is 210 px en de offsetWidth is 430 px, weergegeven binnen dit lichtblauw gemarkeerde gebied. Zie de onderstaande uitvoer.
Uitvoer na het klikken op de knop Verzenden
Je hebt verschillende voorbeelden gezien met verschillende berekeningsparameters. In deze verschillende voorbeelden hebben we de tekstparagraaf met of ook zonder CSS-stijl doorgegeven en vervolgens afzonderlijk de offsetHeight en offsetWidth berekend.