Der offsetHeight ist eine HTML-DOM-Eigenschaft, die von der Programmiersprache JavaScript verwendet wird. Es gibt die sichtbare Höhe eines Elements in Pixel zurück, einschließlich der Höhe des sichtbaren Inhalts, des Rahmens, des Abstands und der Bildlaufleiste, falls vorhanden. Die offsetHeight wird oft mit der offsetWidth-Eigenschaft verwendet. Der offsetWidth ist eine weitere Eigenschaft von HTML DOM, die fast mit offsetHeight identisch ist. Diese Eigenschaften werden von JavaScript verwendet, um die sichtbare Höhe und Breite der HTML-Elemente zu ermitteln.
Die offsetHeight ist eine Kombination aus folgenden HTML-Elementen:
offsetHeight = height + border + padding + horizontal scrollbar
Andererseits enthält offsetWidth die folgenden Elemente:
offsetWidth = width + border + padding + vertical scrollbar
Denken Sie daran, dass offsetHeight und offsetWidth keinen Rand einschließen, weder den oberen noch den unteren Rand. Diese DOM-Eigenschaften werden von verwendet JavaScript-Programmiersprache um die Größe von HTML-Elementen in Pixel zu berechnen.
Mithilfe des folgenden Diagramms können Sie offsetHeight und offsetWidth viel besser verstehen:
Browserunterstützung
Die DOM-Eigenschaft offsetHeight wird von mehreren Webbrowsern wie Chrome und Internet Explorer unterstützt. Im Folgenden sind einige Browser aufgeführt, die die Eigenschaften offsetHeight und offsetWidth unterstützen.
| Browser |  Chrom |  Internet Explorer |  Feuerfuchs |  Oper |  Safari |  Rand |
| offsetHeight-Unterstützung | Ja | Ja | Ja | Ja | Ja | Ja |
Syntax
Nachfolgend finden Sie eine einfache Syntax von offsetHeight:
element.offsetHeight
Hier ist „Element“ eine in JavaScript erstellte Variable, die die CSS-Eigenschaftswerte oder den HTML-Textabsatz enthält.
Rückgabewerte
offsetHeight und offsetWidth geben die berechnete Höhe und Breite der HTML-Elemente in Pixel zurück.
Beispiele
Nachfolgend finden Sie eine Liste einiger Beispiele. Mithilfe dessen werden wir sehen, wie die Eigenschaft offsetHeight verwendet wird und funktioniert.
Beispiel 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 Ausgabe
Sehen Sie sich die folgende Ausgabe an, die einen gelb hervorgehobenen Absatz und eine Schaltfläche zum Senden enthält. Klicken Sie darauf Einreichen Klicken Sie auf die Schaltfläche und berechnen Sie die offsetHeight dieses Absatzes.
Geben Sie die Ausgabe aus, bevor Sie auf die Schaltfläche „Senden“ klicken
Ausgabe nach Klicken auf die Schaltfläche „Senden“.
Die berechnete offsetHeight wird in diesem gelb hervorgehobenen Bereich angezeigt.
Beispiel 2
In diesem Beispiel berechnen wir die offsetHeight für einen in diesem Beispiel bereitgestellten Absatz zusammen mit dem CSS-Stil. Denken Sie daran, dass offsetHeight keinen Rand einschließt.
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 Ausgabe
Sehen Sie sich die folgende Ausgabe an, die einen Absatz in rosa hervorgehobener Farbe und eine Schaltfläche zum Senden enthält. Klicken Sie darauf Berechnen Sie die OffsetHeight Klicken Sie auf die Schaltfläche und berechnen Sie die offsetHeight dieses Absatzes.
Ausgabe vor dem Klicken auf die Schaltfläche „OffsetHeight berechnen“.
Ausgabe nach dem Klicken auf die Schaltfläche „OffsetHeight berechnen“.
Die berechnete offsetHeight wird in diesem rosa hervorgehobenen Bereich angezeigt. Im folgenden Screenshot können Sie sehen, dass offsetHeight für den angegebenen Absatz 230 Pixel beträgt.
Was ist ein Linux-Dateisystem?
Beispiel 3 ohne CSS-Styling
Sehen Sie sich ein weiteres Beispiel für die Berechnung der offsetHeight an. Wir haben keine CSS-Stile wie Höhe, Breite, Rand, Abstand usw. eingefügt, außer Hintergrundfarbe. Der Absatz ist also ein einfacher Absatz ohne Formatierung.
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 Ausgabe
Sehen Sie sich die folgende Ausgabe an, die einen Absatz in orange hervorgehobener Farbe und eine Schaltfläche zum Senden zum Berechnen der OffsetHeight enthält. Klicken Sie darauf Berechnen Sie die OffsetHeight Klicken Sie auf die Schaltfläche und berechnen Sie die offsetHeight dieses Absatzes.
Bevor Sie auf die Schaltfläche „OffsetHeight berechnen“ klicken
Nachdem Sie auf die Schaltfläche „OffsetHeight berechnen“ geklickt haben
Im folgenden Screenshot können Sie sehen, dass offsetHeight für den angegebenen Absatz 88 Pixel beträgt.
Berechnen Sie sowohl offsetHeight als auch offsetWidth
In diesem Beispiel berechnen wir beides offsetHeight Und offsetWidth für einen Absatz innerhalb einer Div-Registerkarte. Sie können also verstehen, wie unterschiedlich sie berechnet haben. Hier verwenden wir CSS und übergeben die Höhe, Breite, den Rand, den Abstand usw. für die Gestaltung in diesem Beispiel.
Kopieren Sie den folgenden Code und führen Sie ihn auf Ihrem System aus, um ihn besser zu verstehen.
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 Ausgabe
Sehen Sie sich die folgende Ausgabe an, die einen Absatz in einem hellblau hervorgehobenen Farbbereich und eine Schaltfläche zum Senden enthält. Klicken Sie darauf Einreichen Klicken Sie auf die Schaltfläche und berechnen Sie die OffsetHeight und OffsetWidth dieses Absatzes.
Geben Sie die Ausgabe aus, bevor Sie auf die Schaltfläche „Senden“ klicken
Nach dem Klicken auf Einreichen Wenn Sie auf die Schaltfläche klicken, beträgt die berechnete OffsetHeight 210 Pixel und die OffsetWidth 430 Pixel, was in diesem hellblau hervorgehobenen Bereich angezeigt wird. Siehe die Ausgabe unten.
Ausgabe nach Klicken auf die Schaltfläche „Senden“.
Sie haben mehrere Beispiele mit unterschiedlichen Berechnungsparametern gesehen. In diesen verschiedenen Beispielen haben wir den Textabsatz mit oder auch ohne CSS-Stil übergeben und dann offsetHeight und offsetWidth separat berechnet.