De offsethöjd är en HTML DOM-egenskap som används av programmeringsspråket JavaScript. Den returnerar den synliga höjden av ett element i pixlar som inkluderar höjden på synligt innehåll, kantlinje, utfyllnad och rullningslist om det finns. OffsetHeight används ofta med egenskapen offsetWidth. De offsetWidth är ytterligare en egenskap för HTML DOM, som är nästan samma som offsetHeight. Dessa egenskaper används av JavaScript för att hitta den synliga höjden och bredden på HTML-elementen.
OffsetHeight är en kombination av följande HTML-element:
offsetHeight = height + border + padding + horizontal scrollbar
Å andra sidan innehåller offsetWidth följande element:
java virtuell maskin
offsetWidth = width + border + padding + vertical scrollbar
Kom ihåg en sak att offsetHeight och offsetWidth inte inkluderar marginal, varken toppmarginal eller bottenmarginal. Dessa DOM-egenskaper används av JavaScript programmeringsspråk för att beräkna dimensionen av HTML-element i pixlar.
Med hjälp av nedanstående diagram kan du förstå offsetHeight och offsetWidth mycket bättre:
Webbläsarstöd
OffsetHeight DOM-egenskapen stöds av flera webbläsare, som Chrome och Internet Explorer. Följande är några webbläsare som stöder offsetHeight och offsetWidth egenskaper.
| Webbläsare |  Krom |  Internet Explorer |  Firefox |  Opera |  Safari |  Kant |
| offsetHeight stöd | Ja | Ja | Ja | Ja | Ja | Ja |
Syntax
Nedan är en enkel syntax för offsetHeight:
element.offsetHeight
Här är element en variabel skapad i JavaScript för att hålla CSS-egenskapersvärdena eller HTML-textstycket.
Returvärden
OffsetHeight och offsetWidth returnerar den beräknade höjden och bredden av HTML-elementen i pixlar.
Exempel
Nedan följer en lista med några exempel. Med hjälp av vilken vi kommer att se hur offsetHeight-egenskapen används och fungerar.
Exempel 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 Produktion
Se utdata nedan som innehåller ett stycke i gul markerad färg och en skicka-knapp. Klicka på detta Skicka in knappen och beräkna offsetHeight för detta stycke.
Utdata innan du klickar på knappen Skicka
Utdata efter att ha klickat på knappen Skicka
Den beräknade offsetHeight kommer att visas i detta gulmarkerade område.
Exempel 2
I det här exemplet kommer vi att beräkna offsetHeight för ett stycke i det här exemplet tillsammans med CSS-stil. Kom ihåg att offsetHeight inte inkluderar marginal.
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 Produktion
Se utdata nedan som innehåller ett stycke i rosa markerad färg och en skicka-knapp. Klicka på detta Beräkna offsetHeight knappen och beräkna offsetHeight för detta stycke.
Utdata innan du klickar på knappen Beräkna offsethöjd
Utdata efter att ha klickat på knappen Beräkna offsetHeight
Den beräknade offsetHeight kommer att visas i detta rosa markerade område. I skärmdumpen nedan kan du se att offsetHeight för det givna stycket är 230px.
Exempel 3 utan CSS-styling
Se ett annat exempel på beräkning av offsetHeight. Vi har inte inkluderat någon CSS-stil som höjd, bredd, marginal, stoppning, etc., förvänta dig bakgrundsfärg. Så stycket blir ett enkelt stycke utan 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 Produktion
Se utdata nedan som innehåller ett stycke i orange markerad färg och en skicka-knapp för att beräkna offsetHeight. Klicka på detta Beräkna offsetHeight knappen och beräkna offsetHeight för detta stycke.
Innan du klickar på knappen Beräkna offsetHeight
Efter att ha klickat på knappen Beräkna offsetHeight
I skärmdumpen nedan kan du se att offsetHeight för det givna stycket är 88px.
Beräkna både offsetHeight och offsetWidth
I det här exemplet kommer vi att beräkna båda offsethöjd och offsetWidth för ett stycke i en div-flik. Så du kan förstå hur olika de beräknade. Här kommer vi att använda CSS och skicka höjd, bredd, marginal, stoppning, etc. för styling i detta exempel.
Kopiera och kör koden nedan på ditt system för att förstå bättre.
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 Produktion
Se utdata nedan som innehåller ett stycke i ljusblått markerat färgområde och en skicka-knapp. Klicka på detta Skicka in knappen och beräkna offsetHeight och offsetWidth för detta stycke.
Utdata innan du klickar på knappen Skicka
delad av sträng java
Efter att ha klickat på Skicka in knappen är den beräknade offsetHeight 210px och offsetWidth är 430px som visas i detta ljusblå markerade område. Se utgången nedan.
Utdata efter att ha klickat på knappen Skicka
Du har sett flera exempel med olika beräkningsparametrar. I dessa olika exempel har vi passerat textstycket med eller även utan CSS-stil och sedan separat beräknat offsetHeight och offsetWidth.