The offsetHeight це властивість HTML DOM, яка використовується мовою програмування JavaScript. Він повертає видиму висоту елемента в пікселях, яка включає висоту видимого вмісту, межі, відступу та смуги прокрутки, якщо вона є. OffsetHeight часто використовується з властивістю offsetWidth. The offsetWidth це ще одна властивість HTML DOM, яка майже така ж, як offsetHeight. Ці властивості використовуються JavaScript для визначення видимої висоти та ширини елементів HTML.
OffsetHeight — це комбінація таких елементів HTML:
java для циклу
offsetHeight = height + border + padding + horizontal scrollbar
З іншого боку, offsetWidth включає такі елементи:
offsetWidth = width + border + padding + vertical scrollbar
Запам’ятайте одну річ, що offsetHeight і offsetWidth не включають поле, ані верхнє, ані нижнє поле. Ці властивості DOM використовуються Мова програмування JavaScript обчислити розмір елементів HTML у пікселях.
За допомогою наведеної нижче діаграми ви можете набагато краще зрозуміти offsetHeight і offsetWidth:
Підтримка браузера
Властивість offsetHeight DOM підтримується кількома веб-браузерами, такими як Chrome і Internet Explorer. Нижче наведено деякі браузери, які підтримують властивості offsetHeight і offsetWidth.
| Браузер |  Chrome |  Internet Explorer |  Firefox |  Опера |  Сафарі |  Край |
| підтримка offsetHeight | Так | Так | Так | Так | Так | Так |
Синтаксис
Нижче наведено простий синтаксис offsetHeight:
element.offsetHeight
Тут елемент — це змінна, створена в JavaScript для зберігання значень властивостей CSS або абзацу тексту HTML.
Повернуті значення
OffsetHeight і offsetWidth повертають обчислену висоту та ширину елементів HTML у пікселях відповідно.
Приклади
Нижче наведено список деяких прикладів. За допомогою якого ми побачимо, як використовується та працює властивість offsetHeight.
np std
Приклад 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 цього абзацу.
Виведіть перед натисканням кнопки Надіслати
Вихід після натискання кнопки Надіслати
Обчислена висота offsetHeight відображатиметься всередині цієї виділеної жовтим кольором області.
Приклад 2
У цьому прикладі ми обчислимо offsetHeight для абзацу, наданого в цьому прикладі разом зі стилями CSS. Пам’ятайте, що offsetHeight не включає поле.
runas у PowerShell
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 цього абзацу.
Виведіть перед натисканням кнопки «Обчислити висоту зміщення».
Виведіть після натискання кнопки «Обчислити висоту зсуву».
Розрахована висота offsetHeight відображатиметься всередині цієї виділеної рожевим кольором області. На знімку екрана нижче ви можете побачити, що offsetHeight для даного абзацу становить 230 пікселів.
Приклад 3 без стилів CSS
Дивіться інший приклад обчислення offsetHeight. Ми не включили жодних стилів CSS, таких як висота, ширина, поля, відступи тощо, очікуємо кольору фону. Отже, абзац буде простим абзацом без стилів.
кінцевий автомат
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 цього абзацу.
Перш ніж натиснути кнопку «Обчислити висоту зміщення».
Після натискання кнопки «Обчислити висоту зміщення».
На знімку екрана нижче ви можете побачити, що offsetHeight для даного абзацу становить 88 пікселів.
Обчисліть як 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 Вихід
java сон
Подивіться наведені нижче результати, що містять абзац у світло-блакитному виділенні області та кнопку надсилання. Натисніть на це Надіслати і обчисліть offsetHeight і offsetWidth цього абзацу.
Виведіть перед натисканням кнопки Надіслати
Після натискання на Надіслати обчислена offsetHeight становить 210 пікселів, а offsetWidth – 430 пікселів, які відображаються всередині цієї світло-блакитної виділеної області. Перегляньте результат нижче.
Вихід після натискання кнопки Надіслати
Ви бачили кілька прикладів з різними параметрами обчислення. У цих різних прикладах ми передали текстовий абзац зі стилем CSS або без нього, а потім окремо обчислили offsetHeight і offsetWidth.