A offsetHeight egy HTML DOM tulajdonság, amelyet a JavaScript programozási nyelv használ. Egy elem látható magasságát adja vissza képpontokban, amely magában foglalja a látható tartalom magasságát, a szegélyt, a kitöltést és a görgetősávot, ha van ilyen. Az offsetHeight gyakran az offsetWidth tulajdonsággal együtt használatos. A offsetWidth a HTML DOM egy további tulajdonsága, amely majdnem megegyezik az offsetHeight értékével. Ezeket a tulajdonságokat használja a JavaScript a HTML-elemek látható magasságának és szélességének meghatározására.
Az offsetHeight a következő HTML-elemek kombinációja:
offsetHeight = height + border + padding + horizontal scrollbar
Másrészt az offsetWidth a következő elemeket tartalmazza:
offsetWidth = width + border + padding + vertical scrollbar
Ne feledje, hogy az offsetHeight és offsetWidth nem tartalmazza a margót, sem a felső, sem az alsó margót. Ezeket a DOM-tulajdonságokat használja JavaScript programozási nyelv a HTML-elemek pixelben való méretének kiszámításához.
Az alábbi diagram segítségével sokkal jobban megértheti az offsetHeight és offsetWidth értékeket:
Böngésző támogatás
Az offsetHeight DOM tulajdonságot számos webböngésző támogatja, például a Chrome és az Internet Explorer. Az alábbiakban felsorolunk néhány böngészőt, amelyek támogatják az offsetHeight és az offsetWidth tulajdonságokat.
magok vs spórák
| Böngésző |  Króm |  internet böngésző |  Firefox |  Opera |  Szafari |  Él |
| offsetHeight támogatás | Igen | Igen | Igen | Igen | Igen | Igen |
Szintaxis
Az alábbiakban az offsetHeight egyszerű szintaxisa látható:
element.offsetHeight
Itt az elem egy JavaScriptben létrehozott változó a CSS-tulajdonságok értékeinek vagy a HTML szöveges bekezdésnek a tárolására.
Visszatérési értékek
Az offsetHeight és offsetWidth a HTML-elemek számított magasságát és szélességét adja vissza pixelben.
Példák
Az alábbiakban felsorolunk néhány példát. Ennek segítségével látni fogjuk, hogy az offsetHeight tulajdonság hogyan használható és működik.
1. példa
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 Kimenet
Lásd az alábbi kimenetet, amely egy sárga, kiemelt színű bekezdést és egy elküldés gombot tartalmaz. Kattintson erre Beküldés gombot, és számítsa ki a bekezdés eltolási magasságát.
Kimenet a Küldés gombra kattintás előtt
Kimenet a Küldés gombra kattintás után
A számított offsetHeight ezen a sárga kiemelt területen belül jelenik meg.
2. példa
Ebben a példában a példában szereplő bekezdés eltolási magasságát a CSS-stílussal együtt számítjuk ki. Ne feledje, hogy az offsetHeight nem tartalmazza a margót.
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 Kimenet
Lásd az alábbi kimenetet, amely egy rózsaszínű, kiemelt színű bekezdést és egy küldés gombot tartalmaz. Kattintson erre Számítsa ki az eltolási magasságot gombot, és számítsa ki a bekezdés eltolási magasságát.
Kimenet, mielőtt a Calculate offsetHeight gombra kattintana
Kimenet a Calculate offsetHeight gombra kattintás után
A számított offsetHeight ezen a rózsaszínű kiemelt területen belül jelenik meg. Az alábbi képernyőképen látható, hogy az offsetHeight az adott bekezdésnél 230 képpont.
3. példa CSS-stílus nélkül
Lásd egy másik példát az offsetHeight kiszámítására. Nem vettünk fel semmilyen CSS-stílust, például magasságot, szélességet, margót, kitöltést stb., várjon háttérszínt. Tehát a bekezdés egy egyszerű bekezdés lesz, stílus nélkül.
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 Kimenet
Tekintse meg az alábbi kimenetet, amely egy narancssárga színű bekezdést és egy küldés gombot tartalmaz az eltolási magasság kiszámításához. Kattintson erre Számítsa ki az eltolási magasságot gombot, és számítsa ki a bekezdés eltolási magasságát.
Mielőtt az EltolásMagasság számítása gombra kattintana
Az eltolásmagasság számítása gombra kattintás után
Az alábbi képernyőképen látható, hogy az offsetHeight az adott bekezdéshez 88 képpont.
Számítsa ki az offsetHeight és offsetWidth értéket
Ebben a példában mindkettőt kiszámítjuk offsetHeight és offsetWidth div lapon belüli bekezdéshez. Így érthető, mennyire máshogy számoltak. Itt CSS-t fogunk használni, és átadjuk a magasságot, szélességet, margót, kitöltést stb. a stílushoz ebben a példában.
Másolja ki és futtassa az alábbi kódot a rendszerén, hogy jobban megértse.
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 Kimenet
Tekintse meg az alábbi kimenetet, amely egy bekezdést világoskék színnel kiemelt területen és egy küldés gombot tartalmaz. Kattintson erre Beküldés gombot, és számítsa ki ennek a bekezdésnek az offsetHeight és offsetWidth értékét.
Kimenet a Küldés gombra kattintás előtt
Miután rákattintott a Beküldés gombot, a számított offsetHeight 210 képpont, az offsetWidth pedig 430 képpont, amely ezen a világoskék területen jelenik meg. Lásd az alábbi kimenetet.
Kimenet a Küldés gombra kattintás után
Számos olyan példát látott már, ahol eltérő számítási paraméterek vannak. Ezekben a különféle példákban a szöveges bekezdést CSS-stílussal vagy anélkül is átadtuk, majd külön kiszámítottuk az offsetHeight és offsetWidth értéket.