The offsetHeight je vlastnost HTML DOM, kterou používá programovací jazyk JavaScript. Vrací viditelnou výšku prvku v pixelech, která zahrnuje výšku viditelného obsahu, ohraničení, odsazení a posuvník, pokud existuje. OffsetHeight se často používá s vlastností offsetWidth. The offsetWidth je další vlastnost HTML DOM, která je téměř stejná jako offsetHeight. Tyto vlastnosti používá JavaScript k nalezení viditelné výšky a šířky prvků HTML.
OffsetHeight je kombinací následujících prvků HTML:
offsetHeight = height + border + padding + horizontal scrollbar
Na druhou stranu offsetWidth obsahuje následující prvky:
offsetWidth = width + border + padding + vertical scrollbar
Pamatujte na jednu věc, že offsetHeight a offsetWidth nezahrnují okraj, ani horní okraj, ani dolní okraj. Tyto vlastnosti DOM používá programovací jazyk JavaScript pro výpočet rozměru prvků HTML v pixelech.
S pomocí níže uvedeného diagramu můžete mnohem lépe porozumět offsetHeight a offsetWidth:
Podpora prohlížeče
Vlastnost offsetHeight DOM je podporována několika webovými prohlížeči, jako je Chrome a Internet Explorer. Níže jsou uvedeny některé prohlížeče, které podporují vlastnosti offsetHeight a offsetWidth.
| Prohlížeč |  Chrome |  internet Explorer |  Firefox |  Opera |  Safari |  Okraj |
| podpora offsetHeight | Ano | Ano | Ano | Ano | Ano | Ano |
Syntax
Níže je jednoduchá syntaxe offsetHeight:
element.offsetHeight
Element je zde proměnná vytvořená v JavaScriptu pro uložení hodnot vlastností CSS nebo odstavce textu HTML.
Návratové hodnoty
OffsetHeight a offsetWidth vrací vypočítanou výšku a šířku prvků HTML v pixelech.
Příklady
Níže je uveden seznam některých příkladů. S jehož pomocí uvidíme, jak se vlastnost offsetHeight používá a funguje.
Pří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ýstup
Podívejte se na níže uvedený výstup obsahující odstavec žlutě zvýrazněný a tlačítko Odeslat. Klikněte na toto Předložit a vypočítejte offsetHeight tohoto odstavce.
Výstup před kliknutím na tlačítko Odeslat
Výstup po kliknutí na tlačítko Odeslat
vyberte multi table sql
Vypočítaný offsetHeight se zobrazí uvnitř této žlutě zvýrazněné oblasti.
Příklad 2
V tomto příkladu vypočítáme offsetHeight pro odstavec poskytnutý v tomto příkladu spolu se styly CSS. Pamatujte, že offsetHeight nebude zahrnovat 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ýstup
Podívejte se na níže uvedený výstup obsahující odstavec zvýrazněný růžovou barvou a tlačítko Odeslat. Klikněte na toto Vypočítat offsetHeight a vypočítejte offsetHeight tohoto odstavce.
Výstup před kliknutím na tlačítko Calculate offsetHeight
Výstup po kliknutí na tlačítko Calculate offsetHeight
Vypočítaný offsetHeight se zobrazí uvnitř této růžově zvýrazněné oblasti. Na níže uvedeném snímku obrazovky můžete vidět, že offsetHeight pro daný odstavec je 230 pixelů.
Příklad 3 bez CSS stylů
Viz další příklad výpočtu offsetHeight. Nezahrnuli jsme žádný styl CSS, jako je výška, šířka, okraj, odsazení atd., očekávejte barvu pozadí. Odstavec tedy bude jednoduchý odstavec bez stylizace.
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ýstup
Podívejte se na níže uvedený výstup obsahující odstavec zvýrazněný oranžovou barvou a tlačítko Odeslat pro výpočet offsetHeight. Klikněte na toto Vypočítat offsetHeight a vypočítejte offsetHeight tohoto odstavce.
Před kliknutím na tlačítko Calculate offsetHeight
Po kliknutí na tlačítko Calculate offsetHeight
Na níže uvedeném snímku obrazovky můžete vidět, že offsetHeight pro daný odstavec je 88px.
Vypočítejte offsetHeight a offsetWidth
V tomto příkladu spočítáme obojí offsetHeight a offsetWidth pro odstavec uvnitř karty div. Takže můžete pochopit, jak rozdílně počítali. Zde použijeme CSS a předáme výšku, šířku, okraj, odsazení atd. pro stylování v tomto příkladu.
Pro lepší pochopení zkopírujte a spusťte níže uvedený kód ve svém systému.
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ýstup
Podívejte se na níže uvedený výstup obsahující odstavec ve světle modře zvýrazněné barevné oblasti a tlačítko Odeslat. Klikněte na toto Předložit a vypočítejte offsetHeight a offsetWidth tohoto odstavce.
výměna paměti
Výstup před kliknutím na tlačítko Odeslat
Po kliknutí na Předložit tlačítko, vypočítaný offsetHeight je 210px a offsetWidth je 430px zobrazeno uvnitř této světle modře zvýrazněné oblasti. Viz výstup níže.
Výstup po kliknutí na tlačítko Odeslat
Viděli jste několik příkladů s různými parametry výpočtu. V těchto různých příkladech jsme předali textový odstavec se stylem CSS nebo také bez něj a poté jsme samostatně vypočítali offsetHeight a offsetWidth.