De offsetHøyde er en HTML DOM-egenskap, som brukes av programmeringsspråket JavaScript. Den returnerer den synlige høyden til et element i piksler som inkluderer høyden på synlig innhold, kantlinje, utfylling og rullefelt hvis det finnes. OffsetHeight brukes ofte med offsetWidth-egenskapen. De offsetWidth er en annen egenskap til HTML DOM, som er nesten den samme som offsetHeight. Disse egenskapene brukes av JavaScript for å finne den synlige høyden og bredden til HTML-elementene.
OffsetHeight er en kombinasjon av følgende HTML-elementer:
offsetHeight = height + border + padding + horizontal scrollbar
På den annen side inkluderer offsetWidth følgende elementer:
offsetWidth = width + border + padding + vertical scrollbar
Husk en ting at offsetHeight og offsetWidth ikke inkluderer margin, verken toppmargin eller bunnmargin. Disse DOM-egenskapene brukes av JavaScript programmeringsspråk for å beregne dimensjonen til HTML-elementer i piksler.
tilkoblinger i java
Ved hjelp av diagrammet nedenfor kan du forstå offsetHeight og offsetWidth mye bedre:
Nettleserstøtte
OffsetHeight DOM-egenskapen støttes av flere nettlesere, som Chrome og Internet Explorer. Følgende er noen nettlesere som støtter offsetHeight og offsetWidth-egenskapene.
| Nettleser |  Chrome |  Internet Explorer |  Firefox |  Opera |  Safari |  Kant |
| offsetHeight støtte | Ja | Ja | Ja | Ja | Ja | Ja |
Syntaks
Nedenfor er en enkel syntaks for offsetHeight:
element.offsetHeight
Her er element en variabel opprettet i JavaScript for å holde CSS-egenskapene eller HTML-tekstavsnittet.
Returverdier
OffsetHeight og offsetWidth returnerer den beregnede høyden og bredden til HTML-elementene i henholdsvis piksler.
hva er et brukernavn
Eksempler
Nedenfor er en liste over noen eksempler. Ved hjelp av dette vil vi se hvordan offsetHeight-egenskapen brukes og fungerer.
Eksempel 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 Produksjon
Se utdataene nedenfor som inneholder et avsnitt i gul uthevet farge og en send-knapp. Klikk på denne Sende inn knappen og beregne offsetHeight for dette avsnittet.
Utdata før du klikker på Send-knappen
Utgang etter å ha klikket på Send-knappen
Den beregnede offsetHeight vil vises innenfor dette gult uthevede området.
Eksempel 2
I dette eksemplet vil vi beregne offsetHeight for et avsnitt gitt i dette eksemplet sammen med CSS-styling. Husk at offsetHeight ikke vil inkludere margin.
hvordan vite skjermstørrelsen
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 Produksjon
Se utdataene nedenfor som inneholder et avsnitt i rosa uthevet farge og en send-knapp. Klikk på denne Beregn offsetHeight knappen og beregne offsetHeight for dette avsnittet.
Utgang før du klikker på Calculate offsetHeight-knappen
Utgang etter å ha klikket på Calculate offsetHeight-knappen
Den beregnede offsetHeight vil vises innenfor dette rosa fremhevede området. I skjermbildet nedenfor kan du se at offsetHeight for det gitte avsnittet er 230px.
Eksempel 3 uten CSS-styling
Se et annet eksempel på beregning av offsetHeight. Vi har ikke inkludert noen CSS-stil som høyde, bredde, margin, polstring, etc., forvent bakgrunnsfarge. Så avsnittet vil være et enkelt avsnitt uten styling.
palindrom i java
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 Produksjon
Se utdataene nedenfor som inneholder et avsnitt i oransje uthevet farge og en send-knapp for å beregne offsetHeight. Klikk på denne Beregn offsetHeight knappen og beregne offsetHeight for dette avsnittet.
Før du klikker på Calculate offsetHeight-knappen
Etter å ha klikket på Calculate offsetHeight-knappen
I skjermbildet nedenfor kan du se at offsetHeight for det gitte avsnittet er 88px.
Beregn både offsetHeight og offsetWidth
I dette eksemplet skal vi beregne begge offsetHøyde og offsetWidth for et avsnitt i en div-fane. Så du kan forstå hvor forskjellig de beregnet. Her vil vi bruke CSS og sende høyde, bredde, margin, polstring osv. for styling i dette eksemplet.
Kopier og kjør koden nedenfor på systemet ditt for å forstå det bedre.
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 Produksjon
Se utdataene nedenfor som inneholder et avsnitt i lyseblått uthevet fargeområde og en send-knapp. Klikk på denne Sende inn knappen og beregne offsetHeight og offsetWidth av dette avsnittet.
Utdata før du klikker på Send-knappen
utvidelsesfil java
Etter å ha klikket på Sende inn knappen, er den beregnede offsetHeight 210px, og offsetWidth er 430px som vises innenfor dette lyseblå uthevede området. Se utgangen nedenfor.
Utgang etter å ha klikket på Send-knappen
Du har sett flere eksempler med forskjellige beregningsparametere. I disse forskjellige eksemplene har vi passert tekstavsnittet med eller også uten CSS-stil og deretter beregnet offsetHeight og offsetWidth separat.