The visina pomaka je HTML DOM svojstvo, koje koristi JavaScript programski jezik. Vraća vidljivu visinu elementa u pikselima koja uključuje visinu vidljivog sadržaja, obruba, ispune i trake za pomicanje ako postoji. OffsetHeight se često koristi sa svojstvom offsetWidth. The širina pomaka je još jedno svojstvo HTML DOM-a, koje je gotovo isto kao offsetHeight. Ova svojstva koristi JavaScript za pronalaženje vidljive visine i širine HTML elemenata.
OffsetHeight je kombinacija sljedećih HTML elemenata:
offsetHeight = height + border + padding + horizontal scrollbar
S druge strane, offsetWidth uključuje sljedeće elemente:
java boolean u niz
offsetWidth = width + border + padding + vertical scrollbar
Upamtite jednu stvar da offsetHeight i offsetWidth ne uključuju marginu, ni gornju ni donju marginu. Ova DOM svojstva koriste JavaScript programski jezik za izračunavanje dimenzija HTML elemenata u pikselima.
Uz pomoć donjeg dijagrama možete puno bolje razumjeti offsetHeight i offsetWidth:
Podrška za preglednik
DOM svojstvo offsetHeight podržava nekoliko web preglednika, poput Chromea i Internet Explorera. Slijede neki preglednici koji podržavaju svojstva offsetHeight i offsetWidth.
| preglednik |  Krom |  Internet Explorer |  Firefox |  Opera |  Safari |  Rub |
| offsetHeight podrška | Da | Da | Da | Da | Da | Da |
Sintaksa
Ispod je jednostavna sintaksa offsetHeight:
element.offsetHeight
Ovdje je element varijabla stvorena u JavaScriptu za držanje vrijednosti CSS svojstava ili odlomka HTML teksta.
Povratne vrijednosti
OffsetHeight i offsetWidth vraćaju izračunatu visinu i širinu HTML elemenata u pikselima.
Primjeri
Dolje je popis nekih primjera. Uz pomoć kojeg ćemo vidjeti kako se koristi i funkcionira svojstvo offsetHeight.
Primjer 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 Izlaz
Pogledajte donji izlaz koji sadrži odlomak označen žutom bojom i gumb za slanje. Kliknite na ovo podnijeti i izračunajte offsetHeight ovog odlomka.
Izlaz prije klika na gumb Pošalji
Izlaz nakon klika na gumb Pošalji
Izračunata visina pomaka prikazat će se unutar ovog žuto označenog područja.
brzina prijenosa u arduinu
Primjer 2
U ovom primjeru izračunat ćemo offsetHeight za odlomak koji je naveden u ovom primjeru zajedno s CSS stilom. Zapamtite da offsetHeight neće uključivati marginu.
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 Izlaz
Pogledajte donji izlaz koji sadrži odlomak označen ružičastom bojom i gumb za slanje. Kliknite na ovo Izračunajte visinu pomaka i izračunajte offsetHeight ovog odlomka.
Ispis prije klika na gumb Izračunaj visinu pomaka
Ispis nakon klika na gumb Izračunaj visinu pomaka
Izračunata visina pomaka prikazat će se unutar ovog ružičasto označenog područja. Na donjoj snimci zaslona možete vidjeti da je offsetHeight za dati odlomak 230px.
Primjer 3 bez CSS stila
Pogledajte još jedan primjer izračuna visine pomaka. Nismo uključili nijedan CSS stil poput visine, širine, margine, ispune itd., očekujte boju pozadine. Dakle, odlomak će biti jednostavan odlomak bez stiliziranja.
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 Izlaz
pretvaranje niza u int java
Pogledajte donji izlaz koji sadrži odlomak označen narančastom bojom i gumb za slanje za izračun visine pomaka. Kliknite na ovo Izračunajte visinu pomaka i izračunajte offsetHeight ovog odlomka.
Prije klika na gumb Izračunaj visinu pomaka
Nakon klika na gumb Calculate offsetHeight
Na donjoj snimci zaslona možete vidjeti da je offsetHeight za navedeni odlomak 88px.
Izračunajte visinu pomaka i širinu pomaka
U ovom primjeru ćemo izračunati oboje visina pomaka i širina pomaka za odlomak unutar kartice div. Dakle, možete shvatiti koliko su različito računali. Ovdje ćemo koristiti CSS i proslijediti visinu, širinu, marginu, ispunu itd. za oblikovanje u ovom primjeru.
Kopirajte i pokrenite donji kod na svom sustavu da biste ga bolje razumjeli.
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 Izlaz
Pogledajte donji izlaz koji sadrži odlomak u svijetloplavo označenom području i gumb za slanje. Kliknite na ovo podnijeti i izračunajte offsetHeight i offsetWidth ovog odlomka.
Izlaz prije klika na gumb Pošalji
Nakon klika na podnijeti gumb, izračunata offsetHeight je 210px, a offsetWidth je 430px prikazan unutar ovog svijetloplavo označenog područja. Pogledajte rezultat u nastavku.
Izlaz nakon klika na gumb Pošalji
Vidjeli ste nekoliko primjera koji imaju različite parametre izračuna. U ovim različitim primjerima, proslijedili smo odlomak teksta sa ili također bez CSS stila, a zatim smo zasebno izračunali visinu pomaka i širinu pomaka.