Det offsetHøjde er en HTML DOM-egenskab, som bruges af programmeringssproget JavaScript. Det returnerer den synlige højde af et element i pixels, der inkluderer højden af synligt indhold, kant, udfyldning og rullepanel, hvis det er til stede. OffsetHeight bruges ofte med offsetWidth-egenskaben. Det offsetWidth er endnu en egenskab ved HTML DOM, som er næsten den samme som offsetHeight. Disse egenskaber bruges af JavaScript til at finde den synlige højde og bredde af HTML-elementerne.
OffsetHeight er en kombination af følgende HTML-elementer:
offsetHeight = height + border + padding + horizontal scrollbar
På den anden side inkluderer offsetWidth følgende elementer:
offsetWidth = width + border + padding + vertical scrollbar
Husk én ting, at offsetHeight og offsetWidth ikke inkluderer margin, hverken topmargin eller bundmargin. Disse DOM-egenskaber bruges af JavaScript programmeringssprog til at beregne dimensionen af HTML-elementer i pixels.
forbindelser i java
Ved hjælp af nedenstående diagram kan du forstå offsetHeight og offsetWidth meget bedre:
Browser support
OffsetHeight DOM-egenskaben understøttes af flere webbrowsere, såsom Chrome og Internet Explorer. Følgende er nogle browsere, der understøtter egenskaberne offsetHeight og offsetWidth.
| Browser |  Chrome |  Internet Explorer |  Firefox |  Opera |  Safari |  Edge |
| offsetHøjde støtte | Ja | Ja | Ja | Ja | Ja | Ja |
Syntaks
Nedenfor er en simpel syntaks for offsetHeight:
element.offsetHeight
Her er element en variabel oprettet i JavaScript for at holde CSS-egenskabsværdierne eller HTML-tekstafsnittet.
Returværdier
OffsetHeight og offsetWidth returnerer henholdsvis den beregnede højde og bredde af HTML-elementerne i pixels.
hvad er et brugernavn
Eksempler
Nedenfor er en liste med nogle eksempler. Ved hjælp af hvilket vi vil se, hvordan offsetHeight-egenskaben bruges 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 Produktion
Se nedenstående output, der indeholder et afsnit i gul fremhævet farve og en send-knap. Klik på dette Indsend knappen og beregn offsetHøjden af dette afsnit.
Output før du klikker på knappen Send
Output efter klik på knappen Send
Den beregnede offsetHeight vil blive vist inde i dette gult fremhævede område.
Eksempel 2
I dette eksempel vil vi beregne offsetHeight for et afsnit i dette eksempel sammen med CSS-styling. Husk at offsetHeight ikke inkluderer margin.
hvordan man kender skærmstø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 Produktion
Se nedenstående output, der indeholder et afsnit i lyserød fremhævet farve og en send-knap. Klik på dette Beregn offsetHøjde knappen og beregn offsetHøjden af dette afsnit.
Output før du klikker på knappen Calculate offsetHeight
Output efter klik på knappen Calculate offsetHeight
Den beregnede offsetHeight vises inde i dette lyserøde fremhævede område. I nedenstående skærmbillede kan du se, at offsetHeight for det givne afsnit er 230px.
Eksempel 3 uden CSS-styling
Se et andet eksempel på beregning af offsetHeight. Vi har ikke inkluderet nogen CSS-stil som højde, bredde, margen, polstring osv. Forvent baggrundsfarve. Så afsnittet vil være et simpelt afsnit uden styling.
java får den aktuelle dato
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 nedenstående output, der indeholder et afsnit i orange fremhævet farve og en send-knap for at beregne offsetHeight. Klik på dette Beregn offsetHøjde knappen og beregn offsetHøjden af dette afsnit.
Før du klikker på knappen Beregn offsetHøjde
Efter at have klikket på knappen Beregn offsetHøjde
I nedenstående skærmbillede kan du se, at offsetHeight for det givne afsnit er 88px.
Beregn både offsetHeight og offsetWidth
I dette eksempel vil vi beregne begge dele offsetHøjde og offsetWidth for et afsnit inde i en div-faneblad. Så du kan forstå, hvor forskelligt de beregnede. Her vil vi bruge CSS og videregive højde, bredde, margin, polstring osv. til styling i dette eksempel.
Kopier og kør nedenstående kode på dit system for at 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 Produktion
Se nedenstående output, der indeholder et afsnit i lyseblåt fremhævet farveområde og en send-knap. Klik på dette Indsend knappen og beregn offsetHeight og offsetWidth af dette afsnit.
Output før du klikker på knappen Send
nfa til dfa konvertering
Efter at have klikket på Indsend knappen, er den beregnede offsetHeight 210px, og offsetWidth er 430px, der vises inde i dette lyseblå fremhævede område. Se output nedenfor.
Output efter klik på knappen Send
Du har set flere eksempler med forskellige beregningsparametre. I disse forskellige eksempler har vi bestået tekstafsnittet med eller også uden CSS-stil og derefter separat beregnet offsetHeight og offsetWidth.