Тхе оффсетХеигхт је ХТМЛ ДОМ својство, које користи ЈаваСцрипт програмски језик. Враћа видљиву висину елемента у пикселима која укључује висину видљивог садржаја, ивицу, паддинг и траку за померање ако постоје. ОффсетХеигхт се често користи са својством оффсетВидтх. Тхе оффсетВидтх је још једно својство ХТМЛ ДОМ-а, које је скоро исто као оффсетХеигхт. Ова својства користи ЈаваСцрипт за проналажење видљиве висине и ширине ХТМЛ елемената.
оффсетХеигхт је комбинација следећих ХТМЛ елемената:
offsetHeight = height + border + padding + horizontal scrollbar
С друге стране, оффсетВидтх укључује следеће елементе:
offsetWidth = width + border + padding + vertical scrollbar
Запамтите једну ствар да оффсетХеигхт и оффсетВидтх не укључују маргину, ни горњу ни доњу маргину. Ова својства ДОМ-а користе ЈаваСцрипт програмски језик за израчунавање димензије ХТМЛ елемената у пикселима.
Уз помоћ дијаграма испод можете много боље разумети оффсетХеигхт и оффсетВидтх:
Подршка за претраживач
Својство оффсетХеигхт ДОМ подржава неколико веб прегледача, као што су Цхроме и Интернет Екплорер. Следе неки прегледачи који подржавају својства оффсетХеигхт и оффсетВидтх.
| Прегледач |  Хром |  интернет претраживач |  Фирефок |  Опера |  Сафари |  Ивица |
| оффсетХеигхт подршка | да | да | да | да | да | да |
Синтакса
Испод је једноставна синтакса оффсетХеигхт:
element.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 Излаз
Погледајте доњи излаз који садржи пасус у жуто истакнутој боји и дугме за слање. Кликните на ово прихвати дугме и израчунајте оффсетХеигхт овог пасуса.
Изнесите пре него што кликнете на дугме Пошаљи
Излаз након клика на дугме Пошаљи
мит пуној форми
Израчуната оффсетХеигхт ће се приказати унутар овог жуто означеног подручја.
Пример 2
У овом примеру ћемо израчунати оффсетХеигхт за параграф који је дат у овом примеру заједно са ЦСС стилом. Запамтите да оффсетХеигхт неће укључивати маргину.
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 Излаз
Погледајте доњи излаз који садржи пасус у ружичастој истакнутој боји и дугме за слање. Кликните на ово Израчунајте оффсетХеигхт дугме и израчунајте оффсетХеигхт овог пасуса.
Излаз пре клика на дугме Израчунај оффсетХеигхт
Излаз након клика на дугме Израчунај оффсетХеигхт
Израчуната оффсетХеигхт ће се приказати унутар овог ружичасто означеног подручја. На доњем снимку екрана можете видети да је оффсетХеигхт за дати пасус 230 пиксела.
Пример 3 без ЦСС стила
Погледајте још један пример израчунавања оффсетХеигхт. Нисмо укључили ниједан ЦСС стил као што су висина, ширина, маргина, паддинг, итд., очекујте боју позадине. Дакле, пасус ће бити једноставан пасус без стила.
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 Излаз
стринг у цео број у Јави
Погледајте доњи излаз који садржи параграф наранџасто истакнуте боје и дугме за слање да бисте израчунали оффсетХеигхт. Кликните на ово Израчунајте оффсетХеигхт дугме и израчунајте оффсетХеигхт овог пасуса.
Пре него што кликнете на дугме Израчунај оффсетХеигхт
Након што кликнете на дугме Израчунај оффсетХеигхт
На доњем снимку екрана можете видети да је оффсетХеигхт за дати пасус 88 пиксела.
Израчунајте и оффсетХеигхт и оффсетВидтх
У овом примеру ћемо израчунати оба оффсетХеигхт и оффсетВидтх за пасус унутар картице див. Дакле, можете разумети колико су различито израчунали. Овде ћемо користити ЦСС и проследити висину, ширину, маргину, паддинг, итд. за стилизовање у овом примеру.
Копирајте и покрените доњи код на свом систему да бисте боље разумели.
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 Излаз
Погледајте доњи излаз који садржи пасус у области означеној светлоплавом бојом и дугме за слање. Кликните на ово прихвати дугме и израчунајте оффсетХеигхт и оффсетВидтх овог пасуса.
Изнесите пре него што кликнете на дугме Пошаљи
Након што кликнете на прихвати дугме, израчуната оффсетХеигхт је 210пк, а оффсетВидтх је 430пк која се приказује унутар ове светлоплаве означене области. Погледајте излаз испод.
Излаз након клика на дугме Пошаљи
Видели сте неколико примера који имају различите параметре израчунавања. У овим различитим примерима, проследили смо текстуални пасус са или такође без ЦСС стила, а затим одвојено израчунали оффсетХеигхт и оффсетВидтх.