The offsetHeight е HTML DOM свойство, което се използва от езика за програмиране JavaScript. Връща видимата височина на елемент в пиксели, която включва височината на видимото съдържание, рамката, подложката и лентата за превъртане, ако има такава. OffsetHeight често се използва със свойството offsetWidth. The offsetWidth е още едно свойство на HTML DOM, което е почти същото като offsetHeight. Тези свойства се използват от JavaScript за намиране на видимата височина и ширина на HTML елементите.
OffsetHeight е комбинация от следните HTML елементи:
offsetHeight = height + border + padding + horizontal scrollbar
От друга страна, offsetWidth включва следните елементи:
offsetWidth = width + border + padding + vertical scrollbar
Запомнете едно нещо, че offsetHeight и offsetWidth не включват поле, нито горно поле, нито долно поле. Тези свойства на DOM се използват от Език за програмиране JavaScript за изчисляване на размерите на HTML елементи в пиксели.
С помощта на диаграмата по-долу можете да разберете offsetHeight и offsetWidth много по-добре:
сортиране на списък с масиви
Поддръжка на браузър
DOM свойството offsetHeight се поддържа от няколко уеб браузъра, като Chrome и Internet Explorer. Следват някои браузъри, които поддържат свойството offsetHeight и offsetWidth.
| Браузър |  Chrome |  Internet Explorer |  Firefox |  Опера |  Safari |  Ръб, край |
| поддръжка на offsetHeight | да | да | да | да | да | да |
Синтаксис
По-долу е даден прост синтаксис на offsetHeight:
element.offsetHeight
Тук element е променлива, създадена в JavaScript, за да съдържа стойностите на свойствата на CSS или абзаца на HTML текст.
Върнати стойности
OffsetHeight и offsetWidth връщат съответно изчислената височина и ширина на HTML елементите в пиксели.
Примери
По-долу е даден списък с някои примери. С помощта на които ще видим как се използва и работи свойството offsetHeight.
Пример 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 Изход
Вижте резултата по-долу, съдържащ параграф в жълто, маркиран цвят, и бутон за изпращане. Кликнете върху това Изпращане и изчислете offsetHeight на този параграф.
kali linux терминал
Изход, преди да щракнете върху бутона Изпращане
Изход след щракване върху бутона Изпращане
Изчислената височина на отместването ще се покаже в тази жълто маркирана област.
Пример 2
В този пример ще изчислим offsetHeight за параграф, предоставен в този пример, заедно със стила на CSS. Не забравяйте, че offsetHeight няма да включва марж.
ubuntu build есенциален
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 Изход
Вижте резултата по-долу, съдържащ абзац в розов цвят и бутон за изпращане. Кликнете върху това Изчислете offsetHeight и изчислете offsetHeight на този параграф.
Изход, преди да щракнете върху бутона Calculate offsetHeight
Изход след щракване върху бутона Изчисляване на височината на отместването
Изчислената височина на отместването ще се покаже в тази осветена в розово област. На екранната снимка по-долу можете да видите, че offsetHeight за дадения параграф е 230px.
Пример 3 без CSS стил
Вижте друг пример за изчисляване на offsetHeight. Не сме включили никакъв CSS стил като височина, ширина, поле, подложка и т.н., очаквайте цвят на фона. Така абзацът ще бъде прост абзац без стил.
mylivecriclet
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 Изход
Вижте изхода по-долу, съдържащ абзац в оранжево маркиран цвят и бутон за изпращане за изчисляване на offsetHeight. Кликнете върху това Изчислете offsetHeight и изчислете offsetHeight на този параграф.
Преди да щракнете върху бутона Calculate offsetHeight
След като щракнете върху бутона Calculate offsetHeight
На екранната снимка по-долу можете да видите, че offsetHeight за дадения параграф е 88px.
Изчислете както offsetHeight, така и offsetWidth
В този пример ще изчислим и двете offsetHeight и offsetWidth за абзац в раздел div. Така че можете да разберете колко различно са изчислили. Тук ще използваме CSS и ще предадем височината, ширината, полето, подложката и т.н. за стилизиране в този пример.
Копирайте и стартирайте кода по-долу на вашата система, за да разберете по-добре.
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 Изход
Вижте изхода по-долу, съдържащ абзац в светлосиньо маркирана цветна област и бутон за изпращане. Кликнете върху това Изпращане и изчислете offsetHeight и offsetWidth на този параграф.
Изход, преди да щракнете върху бутона Изпращане
След като щракнете върху Изпращане бутон, изчислената offsetHeight е 210px, а offsetWidth е 430px, показвайки се в тази светлосиня подчертана област. Вижте резултата по-долу.
питон змия срещу анаконда
Изход след щракване върху бутона Изпращане
Видяхте няколко примера с различни изчислителни параметри. В тези различни примери сме предали текстовия абзац със или също без CSS стил и след това отделно сме изчислили offsetHeight и offsetWidth.