Овај водич елаборира циљ и рад својства „стиле“ ХТМЛ ДОМ елемента у ЈаваСцрипт-у.
Како ХТМЛ ДОМ елемент „стиле“ својство функционише у ЈаваСцрипт-у?
ХТМЛ ДОМ “ стил ” је својство само за читање које функционише на основу додељених својстава стила у складу са тим. Такође, враћа „ ЦСССтилеДецларатион ” објекат који садржи све инлине атрибуте стила одређеног ХТМЛ елемента.
Белешка: Објекат „ЦСССтилеДецларатион“ садржи ЦСС стилске атрибуте дефинисане у одељку заглавља.
Синтакса (подесите својство стила)
елемент. стил . имовина = вредностПрема горњој синтакси, „ стил ” својство подржава само један параметар “ вредност ” који представља вредност наведеног својства стила.
Синтакса (врати својство стила)
елемент. стил . имовинаХајде да практично применимо горе описане синтаксе својства „стиле“.
Пример 1: Користите својство „стиле“ да бисте подесили боју одређеног ХТМЛ елемента
Овај пример примењује основну синтаксу „ стил ” да бисте подесили вредност својства „стиле” тако да се промени боја одређеног ХТМЛ елемента.
ХТМЛ код
Прво прођите кроз дати ХТМЛ код:
< х2 > Користите својство стила у ЈаваСцрипт-у х2 >
< х3 ид = 'Х3' > Други поднаслов. х3 >
У горњим редовима кода:
- „ <х2> ” ХТМЛ ознака одређује први поднаслов.
- „ <х3> ” ознака креира други поднаслов нивоа 3 са додељеним ИД-ом „Х3”.
ЈаваСцрипт код
Затим пратите наведени ЈаваСцрипт код:
< скрипта >документ. гетЕлементБиИд ( 'Х3' ) . стил . боја = 'зелен' ;
скрипта >
У горњем исечку кода, „ доцумент.гетЕлементБиИд() ” метода приступа укљученом “ <х3> ” елемент преко свог ИД-а “ Х3 ” да бисте подесили наведени „ боја ” вредност атрибута елемента преко „ стил.боја ' имовина.
Излаз
Излаз показује да је циљана визуелна репрезентација ХТМЛ елемента постављена у складу са тим помоћу својства „стиле“.
Пример 2: Користите својство „стиле“ да бисте добили вредност примењеног атрибута „стиле“
У овом примеру, својство „стиле“ помаже у проналажењу додељеног атрибута „стиле“ ХТМЛ елементу користећи његову генерализовану синтаксу (Врати својство стила).
ХТМЛ код
ХТМЛ код је наведен овде:
< х2 > Користите својство стила у ЈаваСцрипт-у х2 >< х3 ид = 'Х3' стил = 'боја позадине:наранџаста;' > Вредност боје позадине другог поднаслова је : х3 >
< х4 ид = 'демо' > х4 >
У овом коду:
- „ <х3> ” ХТМЛ ознака користи атрибут „стиле” који поставља боју позадине ХТМЛ елемента „<х3>”.
- „ <х4> ” ознака креира празан поднаслов нивоа 4 који има ИД “ демо ”.
ЈаваСцрипт код
Сада погледајте дати ЈаваСцрипт код:
< скрипта >конст вредност = документ. гетЕлементБиИд ( 'Х3' ) . стил . боја позадине ;
документ. гетЕлементБиИд ( 'демо' ) . иннерХТМЛ = вредност ;
скрипта >
У горе написаном коду:
- Променљива „ вредност ” је декларисано са „ конст ” кључна реч која примењује „ доцумент.гетЕлементБиИд() ” за преузимање елемента „<х3>” користећи његов ИД за добијање вредности примењеног атрибута „стиле” и примену на елемент, тј. „<х3>” преко својства „стиле”.
- Метода „доцумент.гетЕлементБиИд()” се поново користи за приступ додатом празном елементу „<х4>” и за приказ вредности додељеног атрибута „стиле” у односу на преузети ХТМЛ елемент и додавање као поднаслов преко „ иннерХТМЛ ' имовина.
Излаз
Излаз примењује боју позадине на елемент и вредност постављеног атрибута „стиле“ се такође враћа у складу са тим.
Закључак
ЈаваСцрипт користи „ стил ” за додељивање и враћање уметнутих својстава „стил“ ХТМЛ ДОМ елемента. Потребна је додатна „вредност“ да би се у складу с тим применила жељена функционалност. Осим подешавања и преузимања, такође је корисно променити постојећи атрибут „стиле“. Овај водич је показао главни циљ, рад и практичну имплементацију својства стила ХТМЛ ДОМ елемента.