The offsetHeight yra HTML DOM nuosavybė, kurią naudoja JavaScript programavimo kalba. Jis grąžina matomą elemento aukštį pikseliais, įskaitant matomo turinio aukštį, kraštinę, užpildymą ir slinkties juostą, jei tokia yra. OffsetHeight dažnai naudojamas su offsetWidth nuosavybe. The offsetWidth yra dar viena HTML DOM savybė, kuri yra beveik tokia pati kaip ofsetHeight. Šias ypatybes naudoja „JavaScript“, kad surastų matomą HTML elementų aukštį ir plotį.
OffsetHeight yra šių HTML elementų derinys:
offsetHeight = height + border + padding + horizontal scrollbar
Kita vertus, offsetWidth apima šiuos elementus:
offsetWidth = width + border + padding + vertical scrollbar
Atminkite vieną dalyką, kad ofsetHeight ir offsetWidth neapima paraštės, nei viršutinės, nei apatinės paraštės. Šias DOM savybes naudoja JavaScript programavimo kalba HTML elementų matmenims apskaičiuoti pikseliais.
Naudodami toliau pateiktą diagramą galite daug geriau suprasti ofsetHeight ir offsetWidth:
Naršyklės palaikymas
OffsetHeight DOM nuosavybę palaiko kelios žiniatinklio naršyklės, pvz., „Chrome“ ir „Internet Explorer“. Toliau pateikiamos kai kurios naršyklės, palaikančios offsetHeight ir offsetWidth ypatybes.
| Naršyklė |  Chrome |  Internet Explorer |  Firefox |  Opera |  Safari |  Kraštas |
| offsetAukščio palaikymas | Taip | Taip | Taip | Taip | Taip | Taip |
Sintaksė
Žemiau pateikiama paprasta offsetHeight sintaksė:
element.offsetHeight
Čia elementas yra „JavaScript“ sukurtas kintamasis, turintis CSS ypatybių vertes arba HTML teksto pastraipą.
if ir else in bash
Grąžinamos vertės
OffsetHeight ir offsetWidth atitinkamai grąžina apskaičiuotą HTML elementų aukštį ir plotį pikseliais.
Pavyzdžiai
Žemiau pateikiamas kai kurių pavyzdžių sąrašas. Kurių pagalba pamatysime, kaip naudojama ir veikia offsetHeight savybė.
1 pavyzdys
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 Išvestis
Žiūrėkite toliau pateiktą išvestį, kurioje yra geltonai paryškinta pastraipa ir pateikimo mygtukas. Spustelėkite tai Pateikti mygtuką ir apskaičiuokite šios pastraipos offsetHeight.
Išvestis prieš paspaudus mygtuką Pateikti
Išvestis paspaudus mygtuką Pateikti
Apskaičiuotas poslinkio aukštis bus rodomas šioje geltonai paryškintoje srityje.
2 pavyzdys
Šiame pavyzdyje mes apskaičiuosime šiame pavyzdyje pateiktos pastraipos offsetHeight kartu su CSS stiliumi. Atminkite, kad offsetHeight neapims paraštės.
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 Išvestis
Žiūrėkite toliau pateiktą išvestį, kurioje yra rožinės spalvos pastraipa ir pateikimo mygtukas. Spustelėkite tai Apskaičiuokite poslinkio aukštį mygtuką ir apskaičiuokite šios pastraipos offsetHeight.
Išvestis prieš spustelėjus mygtuką Apskaičiuoti poslinkio aukštį
Išvestis spustelėjus mygtuką Apskaičiuoti poslinkio aukštį
Apskaičiuotas poslinkio aukštis bus rodomas šioje rausvai paryškintoje srityje. Žemiau esančioje ekrano kopijoje matote, kad nurodytos pastraipos ofsetHeight yra 230 pikselių.
3 pavyzdys be CSS stiliaus
Žr. kitą poslinkio aukščio apskaičiavimo pavyzdį. Neįtraukėme jokio CSS stiliaus, pvz., aukščio, pločio, paraštės, užpildymo ir kt., tikėkitės fono spalvos. Taigi pastraipa bus paprasta pastraipa be stiliaus.
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 Išvestis
Žiūrėkite toliau pateiktą išvestį, kurioje yra pastraipa oranžine paryškinta spalva ir pateikimo mygtukas, kad apskaičiuotumėte poslinkio aukštį. Spustelėkite tai Apskaičiuokite poslinkio aukštį mygtuką ir apskaičiuokite šios pastraipos offsetHeight.
Prieš spustelėdami mygtuką Apskaičiuoti poslinkio aukštį
Spustelėjus mygtuką Apskaičiuoti poslinkio aukštį
Žemiau esančioje ekrano kopijoje matote, kad nurodytos pastraipos ofsetHeight yra 88 pikseliai.
Apskaičiuokite ir offsetHeight, ir offsetWidth
Šiame pavyzdyje apskaičiuosime abu offsetHeight ir offsetWidth pastraipai div skirtuke. Taigi, jūs galite suprasti, kaip skirtingai jie apskaičiavo. Šiame pavyzdyje stiliaus formavimui naudosime CSS ir perduosime aukštį, plotį, paraštę, užpildymą ir kt.
Nukopijuokite ir paleiskite toliau pateiktą kodą savo sistemoje, kad geriau suprastumėte.
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 Išvestis
konvertuoti int į eilutę c++
Žiūrėkite toliau pateiktą išvestį, kurioje yra pastraipa šviesiai mėlynai paryškintoje srityje ir pateikimo mygtukas. Spustelėkite tai Pateikti mygtuką ir apskaičiuokite šios pastraipos offsetHeight ir offsetWidth.
Išvestis prieš paspaudus mygtuką Pateikti
Paspaudę ant Pateikti mygtuką, apskaičiuotas offsetHeight yra 210 pikselių, o poslinkio plotis – 430 pikselių, rodomas šioje šviesiai mėlynai paryškintoje srityje. Žiūrėkite išvestį žemiau.
Išvestis paspaudus mygtuką Pateikti
Matėte keletą pavyzdžių su skirtingais skaičiavimo parametrais. Šiuose įvairiuose pavyzdžiuose mes perdavėme teksto pastraipą su CSS stiliumi arba be jo ir tada atskirai apskaičiavome ofsetHeight ir offsetWidth.