The offsetHeight je vlastnosť HTML DOM, ktorú používa programovací jazyk JavaScript. Vracia viditeľnú výšku prvku v pixeloch, ktorá zahŕňa výšku viditeľného obsahu, orámovanie, výplň a posúvač, ak je prítomný. OffsetHeight sa často používa s vlastnosťou offsetWidth. The offsetWidth je ďalšia vlastnosť HTML DOM, ktorá je takmer rovnaká ako offsetHeight. Tieto vlastnosti používa JavaScript na nájdenie viditeľnej výšky a šírky prvkov HTML.
OffsetHeight je kombináciou nasledujúcich prvkov HTML:
offsetHeight = height + border + padding + horizontal scrollbar
Na druhej strane, offsetWidth obsahuje nasledujúce prvky:
offsetWidth = width + border + padding + vertical scrollbar
Pamätajte na jednu vec, že offsetHeight a offsetWidth nezahŕňajú okraj, ani horný okraj, ani spodný okraj. Tieto vlastnosti DOM používa JavaScript programovací jazyk na výpočet rozmeru prvkov HTML v pixeloch.
avl rotácia stromu
Pomocou nižšie uvedeného diagramu môžete oveľa lepšie pochopiť offsetHeight a offsetWidth:
Podpora prehliadača
Vlastnosť offsetHeight DOM je podporovaná niekoľkými webovými prehliadačmi, ako sú Chrome a Internet Explorer. Nasledujú niektoré prehliadače, ktoré podporujú vlastnosti offsetHeight a offsetWidth.
| Prehliadač |  Chrome |  internet Explorer |  Firefox |  Opera |  Safari |  Hrana |
| podpora offsetHeight | Áno | Áno | Áno | Áno | Áno | Áno |
Syntax
Nižšie je uvedená jednoduchá syntax offsetHeight:
element.offsetHeight
Element je tu premenná vytvorená v JavaScripte na uchovávanie hodnôt vlastností CSS alebo odseku textu HTML.
Návratové hodnoty
OffsetHeight a offsetWidth vrátia vypočítanú výšku a šírku prvkov HTML v pixeloch.
Príklady
Nižšie je uvedený zoznam niektorých príkladov. S pomocou ktorých uvidíme, ako sa používa a funguje vlastnosť offsetHeight.
Príklad 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 Výkon
Pozrite si výstup uvedený nižšie, ktorý obsahuje odsek v žlto zvýraznenej farbe a tlačidlo Odoslať. Kliknite na toto Predložiť a vypočítajte offsetHeight tohto odseku.
Výstup pred kliknutím na tlačidlo Odoslať
volanie funkcie javascript z html
Výstup po kliknutí na tlačidlo Odoslať
Vypočítaná výška offsetHeight sa zobrazí v tejto žlto zvýraznenej oblasti.
Príklad 2
V tomto príklade vypočítame offsetHeight pre odsek uvedený v tomto príklade spolu so štýlom CSS. Pamätajte, že offsetHeight nebude zahŕňať okraj.
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 Výkon
Pozrite si výstup uvedený nižšie, ktorý obsahuje odsek zvýraznený ružovou farbou a tlačidlo odoslania. Kliknite na toto Vypočítajte offsetHeight a vypočítajte offsetHeight tohto odseku.
Výstup pred kliknutím na tlačidlo Calculate offsetHeight
Výstup po kliknutí na tlačidlo Calculate offsetHeight
Vypočítaný offsetHeight sa zobrazí v tejto ružovo zvýraznenej oblasti. Na nižšie uvedenej snímke obrazovky môžete vidieť, že offsetHeight pre daný odsek je 230 pixelov.
Príklad 3 bez štýlu CSS
Pozrite si ďalší príklad výpočtu offsetHeight. Nezahrnuli sme žiadny štýl CSS, ako je výška, šírka, okraj, výplň atď., Očakávajte farbu pozadia. Takže odsek bude jednoduchý odsek bez štýlu.
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 Výkon
ubuntu build nevyhnutné
Pozrite si výstup uvedený nižšie, ktorý obsahuje odsek v oranžovej farbe a tlačidlo odoslania na výpočet výšky offsetHeight. Kliknite na toto Vypočítajte offsetHeight a vypočítajte offsetHeight tohto odseku.
Pred kliknutím na tlačidlo Calculate offsetHeight
Po kliknutí na tlačidlo Calculate offsetHeight
Na nižšie uvedenej snímke obrazovky môžete vidieť, že offsetHeight pre daný odsek je 88 pixelov.
Vypočítajte offsetHeight a offsetWidth
V tomto príklade vypočítame oboje offsetHeight a offsetWidth pre odsek vo vnútri karty div. Takže môžete pochopiť, ako rozdielne vypočítali. Tu použijeme CSS a v tomto príklade prejdeme na výšku, šírku, okraj, výplň atď.
Aby ste lepšie porozumeli, skopírujte a spustite nižšie uvedený kód vo svojom systéme.
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 Výkon
char a int java
Pozrite si výstup uvedený nižšie, ktorý obsahuje odsek vo farebnej oblasti zvýraznenej svetlomodrou farbou a tlačidlo odoslania. Kliknite na toto Predložiť a vypočítajte offsetHeight a offsetWidth tohto odseku.
Výstup pred kliknutím na tlačidlo Odoslať
Po kliknutí na Predložiť tlačidlo, vypočítaný offsetHeight je 210 pixelov a offsetWidth je 430 pixelov zobrazených v tejto svetlomodrej zvýraznenej oblasti. Pozrite si výstup nižšie.
Výstup po kliknutí na tlačidlo Odoslať
Videli ste niekoľko príkladov s rôznymi parametrami výpočtu. V týchto rôznych príkladoch sme prešli textový odsek so štýlom CSS alebo aj bez neho a potom sme samostatne vypočítali offsetHeight a offsetWidth.