The nobīdesAugstums ir HTML DOM rekvizīts, ko izmanto JavaScript programmēšanas valoda. Tas atgriež elementa redzamo augstumu pikseļos, kas ietver redzamā satura augstumu, apmali, polsterējumu un ritjoslu, ja tāda ir. OffsetHeight bieži izmanto ar offsetWidth rekvizītu. The nobīdeWidth ir vēl viens HTML DOM rekvizīts, kas ir gandrīz tāds pats kā offsetHeight. Šos rekvizītus JavaScript izmanto, lai atrastu HTML elementu redzamo augstumu un platumu.
OffsetHeight ir šādu HTML elementu kombinācija:
offsetHeight = height + border + padding + horizontal scrollbar
No otras puses, offsetWidth ietver šādus elementus:
offsetWidth = width + border + padding + vertical scrollbar
Atcerieties vienu lietu, ka ofsetHeight un offsetWidth neietver piemales, ne augšējās, ne apakšējās piemales. Šos DOM rekvizītus izmanto JavaScript programmēšanas valoda lai aprēķinātu HTML elementu izmērus pikseļos.
Izmantojot zemāk esošo diagrammu, jūs varat daudz labāk saprast ofsetHeight un offsetWidth:
Pārlūka atbalsts
OffsetHeight DOM rekvizītu atbalsta vairākas tīmekļa pārlūkprogrammas, piemēram, Chrome un Internet Explorer. Tālāk ir norādītas dažas pārlūkprogrammas, kas atbalsta offsetHeight un offsetWidth īpašumu.
| Pārlūkprogramma |  Chrome |  Internet Explorer |  Firefox |  Opera |  Safari |  Mala |
| offsetHeight atbalsts | Jā | Jā | Jā | Jā | Jā | Jā |
Sintakse
Tālāk ir sniegta vienkārša offsetHeight sintakse:
element.offsetHeight
Šeit elements ir mainīgais, kas izveidots JavaScript, lai turētu CSS rekvizītu vērtības vai HTML teksta rindkopu.
Atgriešanas vērtības
OffsetHeight un offsetWidth attiecīgi atgriež aprēķināto HTML elementu augstumu un platumu pikseļos.
Piemēri
Tālāk ir sniegts dažu piemēru saraksts. Ar kura palīdzību redzēsim, kā tiek izmantots un darbojas offsetHeight īpašība.
1. piemērs
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 Izvade
fibonači sērija java
Skatiet tālāk redzamo izvadi, kurā ir rindkopa dzeltenā izceltā krāsā un iesniegšanas poga. Noklikšķiniet uz šī Iesniegt pogu un aprēķiniet šīs rindkopas ofsetHeight.
Izvade pirms noklikšķināšanas uz pogas Iesniegt
Izvade pēc noklikšķināšanas uz pogas Iesniegt
Aprēķinātais offsetHeight tiks parādīts šajā dzeltenajā iezīmētajā apgabalā.
2. piemērs
Šajā piemērā mēs aprēķināsim offsetHeight šajā piemērā norādītajai rindkopai kopā ar CSS stilu. Atcerieties, ka offsetHeight neietver rezervi.
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 Izvade
javascript nolaižamā izvēlne
Skatiet zemāk esošo izvadi, kurā ir rindkopa rozā iezīmētā krāsā un iesniegšanas poga. Noklikšķiniet uz šī Aprēķināt ofsetHeight pogu un aprēķiniet šīs rindkopas ofsetHeight.
Izvade pirms noklikšķināšanas uz pogas Aprēķināt nobīdes augstumu
Izvade pēc noklikšķināšanas uz pogas Aprēķināt nobīdes augstumu
Aprēķinātais offsetHeight tiks parādīts šajā rozā iezīmētajā apgabalā. Zemāk esošajā ekrānuzņēmumā varat redzēt, ka noteiktā rindkopas nobīdes augstums ir 230 pikseļi.
3. piemērs bez CSS stila
Skatiet citu nobīdes augstuma aprēķināšanas piemēru. Mēs neesam iekļāvuši nevienu CSS stilu, piemēram, augstumu, platumu, malu, polsterējumu utt., gaidiet fona krāsu. Tātad rindkopa būs vienkārša rindkopa bez stila.
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 Izvade
cpld vs fpga
Skatiet tālāk redzamo izvadi, kurā ir rindkopa oranžā izceltā krāsā un iesniegšanas poga, lai aprēķinātu nobīdes augstumu. Noklikšķiniet uz šī Aprēķināt ofsetHeight pogu un aprēķiniet šīs rindkopas ofsetHeight.
Pirms noklikšķināt uz pogas Aprēķināt nobīdes augstumu
Pēc noklikšķināšanas uz pogas Aprēķināt nobīdes augstumu
Zemāk esošajā ekrānuzņēmumā var redzēt, ka norādītās rindkopas offsetHeight ir 88 pikseļi.
Aprēķiniet gan offsetHeight, gan ofsetWidth
Šajā piemērā mēs aprēķināsim abus nobīdesAugstums un nobīdeWidth rindkopai div cilnē. Tātad, jūs varat saprast, cik atšķirīgi viņi aprēķināja. Šeit mēs izmantosim CSS un nodosim augstumu, platumu, malu, polsterējumu utt., lai izveidotu stilu šajā piemērā.
Nokopējiet un palaidiet tālāk norādīto kodu savā sistēmā, lai labāk izprastu.
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 Izvade
Skatiet tālāk redzamo izvadi, kurā ir rindkopa gaiši zilā izceltā krāsu apgabalā un iesniegšanas poga. Noklikšķiniet uz šī Iesniegt pogu un aprēķiniet šīs rindkopas ofsetHeight un offsetWidth.
Izvade pirms noklikšķināšanas uz pogas Iesniegt
Pēc noklikšķināšanas uz Iesniegt pogu, aprēķinātais offsetHeight ir 210 pikseļi un offsetWidth ir 430 pikseļi, kas tiek rādīts šajā gaiši zilā izceltā apgabalā. Skatiet izvadi zemāk.
Izvade pēc noklikšķināšanas uz pogas Iesniegt
Jūs esat redzējis vairākus piemērus ar dažādiem aprēķina parametriem. Šajos dažādajos piemēros esam izturējuši teksta rindkopu ar vai arī bez CSS stila un pēc tam atsevišķi aprēķinājuši ofsetHeight un offsetWidth.