Овај блог показује употребу ДОМ елемента цлиентХеигхт у ХТМЛ-у.
Како користити ДОМ елемент „цлиентХеигхт“ у ХТМЛ-у?
„ цлиентХеигхт ” својство омогућава програмерима да израчунају висину видљивог садржаја елемента. Помаже у позиционирању елемената један у односу на други или у одређивању да ли је корисник скроловао до десне ивице контејнера који се може померати. Такође пружа информације о преосталом неискоришћеном простору на веб страници.
Пример
Хајде да прођемо кроз пример за бољу демонстрацију својства „цлиентХеигхт“. На пример, „ онцлицк ” слушалац догађаја се користи за приказивање резултата које пружа „ цлиентХеигхт ' имовина:
< тело >
< х2 ид = 'елемент' >< / х2 >
< х2 ид = 'елемент' онцлицк = 'сховелементХеигхт()' >
Кликните на чланак о Линукхинт да бисте приказали висину!
< / х2 >
< скрипта >
функција сховелементХеигхт() {
вар екампле = доцумент.гетЕлементБиИд('елемент');
вар елементХеигхт= екампле.цлиентХеигхт;
алерт('Висина је: ' + елементХеигхт + ' пиксела.');
}
< / скрипта > >
< / тело >
Објашњење горњег исечка кода је описано у наставку:
- У почетку, направите „ <х2> ” ознака унутар “ <боди> ” и наведите неке лажне податке. Такође, доделите ИД од „ елемент ” на изабрани ХТМЛ елемент.
- Затим додајте „ онцлицк() ” слушалац догађаја који позива „ сховелементХеигхт() ” када корисник кликне на „ <х2> ” елемент.
- Затим, унутар „ сховелементХеигхт() ” функција креира променљиву под називом “ пример ” који делује као инстанца за ХТМЛ елемент који има ИД од „ елемент ”.
- Затим креирајте другу променљиву под називом „ елементХеигхт ’’ који чува резултат који пружа својство „цлиентХеигхт“.
- Након тога, прикажите „ елементХеигхт ’’ променљива на пољу упозорења користећи „ упозорење() ” метод.
На крају, додајте следећа ЦСС својства за стилизовање „ х2 ” елемент:
< стил >
#елемент {
маргина: 20пк;
паддинг: 10пк;
позадина- боја : даркциан;
висина : 300пк;
текст- поравнајте : центар;
линија- висина : 100пк;
}
< / стил >
У горњем исечку кода, следећа ЦСС својства су додељена диву који има ИД „ елемент ”:
- „ 20пк ”, “ 10пк ' и ' даркциан ” вредности су обезбеђене ЦСС-у “ маргина ”, “ паддинг ' и ' боја позадине ” својства, респективно.
- Такође користи „ висина ”, “ Поравнање текста ' и ' Висина линија ” ЦСС својства за побољшање видљивости корисника.
Након извршења горњег исечка кода, веб страница изгледа овако:
Излаз показује да је висина изабраног елемента приказана у пољу упозорења, кад год корисник кликне на елемент.
Закључак
Да бисте користили „ цлиентХеигхт ” у ХТМЛ-у, изаберите ХТМЛ елемент тако што ћете приступити атрибуту ид. Након тога, приложите својство „цлиентХеигхт“ и прикажите резултат. То је својство само за читање и враћа резултат у пикселима. Својство “цлиентХеигхт” ради унутар ознаке “<сцрипт>”. Враћа висину изабраног елемента укључујући паддинг, напуштање ивице и маргину. Овај чланак је показао како се користи ДОМ елемент цлиентХеигхт у ХТМЛ-у.