The offsetHeight on HTML DOM -ominaisuus, jota JavaScript-ohjelmointikieli käyttää. Se palauttaa elementin näkyvän korkeuden pikseleinä, joka sisältää näkyvän sisällön korkeuden, reunuksen, täytön ja vierityspalkin, jos sellainen on. OffsetHeight käytetään usein offsetWidth-ominaisuuden kanssa. The offsetWidth on vielä yksi HTML DOM:n ominaisuus, joka on melkein sama kuin offsetHeight. JavaScript käyttää näitä ominaisuuksia HTML-elementtien näkyvän korkeuden ja leveyden löytämiseen.
OffsetHeight on yhdistelmä seuraavista HTML-elementeistä:
offsetHeight = height + border + padding + horizontal scrollbar
Toisaalta offsetWidth sisältää seuraavat elementit:
offsetWidth = width + border + padding + vertical scrollbar
Muista yksi asia, että offsetHeight ja offsetWidth eivät sisällä marginaalia, ei ylä- eikä alamarginaalia. Näitä DOM-ominaisuuksia käyttävät JavaScript ohjelmointikieli laskea HTML-elementtien mitat pikseleinä.
Alla olevan kaavion avulla ymmärrät offsetHeight- ja offsetWidth-arvot paljon paremmin:
Selaimen tuki
OffsetHeight DOM - ominaisuutta tukevat useat verkkoselaimet , kuten Chrome ja Internet Explorer . Seuraavassa on joitain selaimia, jotka tukevat offsetHeight- ja offsetWidth-ominaisuutta.
| Selain |  Kromi |  Internet Explorer |  Firefox |  Ooppera |  Safari |  Reuna |
| offsetHeight tuki | Joo | Joo | Joo | Joo | Joo | Joo |
Syntaksi
Alla on yksinkertainen offsetHeight-syntaksi:
element.offsetHeight
Tässä elementti on JavaScriptissä luotu muuttuja, joka sisältää CSS-ominaisuuksien arvot tai HTML-tekstikappaleen.
Palautusarvot
OffsetHeight ja offsetWidth palauttavat HTML-elementtien lasketun korkeuden ja leveyden pikseleinä, vastaavasti.
ipconfig Ubuntussa
Esimerkkejä
Alla on luettelo joistakin esimerkeistä. Sen avulla näemme miten offsetHeight -ominaisuutta käytetään ja toimii.
Esimerkki 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 Lähtö
Katso alla oleva tulos, joka sisältää kappaleen keltaisella korostetulla värillä ja lähetä-painikkeen. Napsauta tätä Lähetä -painiketta ja laske tämän kappaleen offsetHeight.
Tulosta ennen kuin napsautat Lähetä-painiketta
Tulostus lähetä-painikkeen painamisen jälkeen
Laskettu offsetHeight näkyy tämän keltaisella korostetulla alueella.
Esimerkki 2
Tässä esimerkissä laskemme tässä esimerkissä esitetyn kappaleen offsetHeight-arvon yhdessä CSS-tyylin kanssa. Muista, että offsetHeight ei sisällä marginaalia.
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 Lähtö
Katso alla oleva tulos, joka sisältää kappaleen vaaleanpunaisella korostetulla värillä ja lähetä-painikkeen. Napsauta tätä Laske offsetHeight -painiketta ja laske tämän kappaleen offsetHeight.
Tulosta ennen kuin napsautat Laske offsetHeight -painiketta
Tulos, kun olet napsauttanut Laske offsetHeight -painiketta
Laskettu offsetHeight näkyy tämän vaaleanpunaisen korostetun alueen sisällä. Alla olevassa kuvakaappauksessa näet, että tietyn kappaleen offsetHeight on 230 pikseliä.
Esimerkki 3 ilman CSS-tyyliä
Katso toinen esimerkki offsetHeightin laskemisesta. Emme ole sisällyttäneet CSS-tyylejä, kuten korkeus, leveys, marginaali, täyte jne., odota taustaväriä. Kappale on siis yksinkertainen kappale, jossa ei ole tyyliä.
distributiivinen laki Boolen algebra
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 Lähtö
mikä on desktop ini
Katso alla oleva tulos, joka sisältää kappaleen oranssilla korostetulla värillä ja lähetyspainikkeen offsetHeightin laskemiseksi. Napsauta tätä Laske offsetHeight -painiketta ja laske tämän kappaleen offsetHeight.
Ennen kuin napsautat Laske offsetHeight -painiketta
Napsautettuaan Laske offsetHeight -painiketta
Alla olevassa kuvakaappauksessa näet, että tietyn kappaleen offsetHeight on 88 kuvapistettä.
Laske sekä offsetHeight että offsetWidth
Tässä esimerkissä laskemme molemmat offsetHeight ja offsetWidth div-välilehden sisällä olevalle kappaleelle. Joten voit ymmärtää, kuinka eri tavalla he laskivat. Tässä käytämme CSS:ää ja välitämme korkeuden, leveyden, marginaalin, täytteen jne. tyyliä varten tässä esimerkissä.
Kopioi ja suorita alla oleva koodi järjestelmässäsi ymmärtääksesi paremmin.
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 Lähtö
Katso alla oleva tuloste, joka sisältää kappaleen vaaleansinisellä korostetulla värialueella ja lähetä-painikkeen. Napsauta tätä Lähetä -painiketta ja laske tämän kappaleen offsetHeight ja offsetWidth.
Tulosta ennen kuin napsautat Lähetä-painiketta
Napsautettuaan Lähetä -painiketta, laskettu offsetHeight on 210px ja offsetWidth on 430px, joka näkyy tämän vaaleansinisellä korostetulla alueella. Katso tulos alta.
Tulostus lähetä-painikkeen painamisen jälkeen
Olet nähnyt useita esimerkkejä, joissa on erilaiset laskentaparametrit. Näissä erilaisissa esimerkeissä olemme ohittaneet tekstikappaleen CSS-tyylillä tai myös ilman ja laskeneet sitten erikseen offsetHeight- ja offsetWidth-arvot.