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