Ажурирање класа помоћу ЈаваСцрипт-а
ЈаваСцрипт пружа моћне алате за динамичку интеракцију са ХТМЛ елементима и манипулисање њима. Један уобичајени задатак је промена класе ХТМЛ елемента као одговор на догађаје као што је онцлицк.
Овај водич ће показати како да користите ЈаваСцрипт за промену класе елемента, омогућавајући динамички стил и промене понашања на вашим веб страницама. Без обзира да ли одговарате на клик на дугме или неки други догађај, ове технике ће побољшати ваше вештине развоја веба.
| Цомманд | Опис |
|---|---|
| className | Поставља или враћа атрибут класе елемента. Користи се за промену класе елемента. |
| getElementById | Враћа елемент који има ИД атрибут са наведеном вредношћу. Користи се за избор елемента дугмета. |
| onclick | Поставља функцију која ће се извршити када дође до клика на елементу. |
| removeClass | Уклања једно или више имена класа из изабраних елемената у јКуери-ју. |
| addClass | Додаје једно или више имена класа изабраним елементима у јКуери-ју. |
| $ | Алиас за јКуери, који се користи за одабир елемената и извршавање радњи на њима. |
Разумевање манипулације ЈаваСцрипт класом
Достављене скрипте показују како да промените класу ХТМЛ елемента користећи ЈаваСцрипт и јКуери као одговор на догађај клика. У првој скрипти, обичан ЈаваСцрипт се користи за постизање ове функционалности. Тхе getElementById метода се користи за одабир елемента дугмета са ИД-ом 'миБуттон'. Тхе onclick догађај се затим додељује овом елементу, одређујући функцију која ће се извршити када се кликне на дугме. Унутар ове функције, дугме className својство је подешено на 'промењено', мењајући своју класу, а потом и стил како је дефинисано у ЦСС-у. Ова скрипта ефикасно приказује једноставност и директност коришћења обичног ЈаваСцрипт-а за ДОМ манипулацију.
Друга скрипта илуструје исту функционалност користећи јКуери, популарну ЈаваСцрипт библиотеку која поједностављује кретање и манипулацију ХТМЛ документом. Овде, јКуери алиас $ се користи за избор елемента дугмета. Тхе click затим се примењује метод за подешавање руковаоца догађаја за клик догађај. Унутар овог руковаоца, класа дугмета се мења помоћу јКуери-ја removeClass и addClass методе. Ове методе обезбеђују згодан начин за манипулисање класама елемента, нудећи читљивији и сажетији приступ у поређењу са обичним ЈаваСцрипт-ом. Обе скрипте имају за циљ да покажу како различити алати могу постићи исти циљ динамичке промене класе елемента на основу интеракције корисника.
Промена класе елемента на клик користећи ЈаваСцрипт
ЈаваСцрипт и ХТМЛ
// HTML<!DOCTYPE html><html><head><title>Change Class Example</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script>document.getElementById('myButton').onclick = function() {this.className = 'changed';};</script></body></html>
Ажурирање класе ХТМЛ елемента користећи јКуери
ЈаваСцрипт са јКуери-јем
// HTML<!DOCTYPE html><html><head><title>Change Class with jQuery</title><style>.original { color: blue; }.changed { color: red; }</style></head><body><button id="myButton" class="original">Click me</button><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>$('#myButton').click(function() {$(this).removeClass('original').addClass('changed');});</script></body></html>
Напредне технике за манипулацију класом у ЈаваСцрипт-у
Осим основних промена класа као одговор на догађаје, ЈаваСцрипт нуди напредније технике за манипулисање листом класа елемента. Једна таква метода је classList имовине, која пружа флексибилнији и моћнији начин рада са класама. Тхе classList својство враћа живу ДОМТокенЛист колекцију атрибута класе елемента. Користећи classList, можете да додајете, уклањате, пребацујете и проверавате да ли постоје класе без утицаја на друге класе које се могу применити на елемент.
На пример, тхе add метода се може користити за додавање једне или више класа елементу, док је remove метода може уклонити једну или више наведених класа. Тхе toggle метода је посебно корисна јер додаје класу ако не постоји и уклања је ако постоји, што га чини идеалним за задатке као што је имплементација прекидача тамног режима. Поред тога, тхе contains метода проверава да ли елемент садржи одређену класу, што може бити корисно за условну примену стилова или понашања на основу тренутног стања елемента.
Често постављана питања о манипулацији ЈаваСцрипт класом
- Како да додам више класа елементу?
- Користити classList.add метод са више аргумената: element.classList.add('class1', 'class2').
- Могу ли да уклоним све класе из елемента?
- Да, можете користити className својство и поставите га на празан стринг: element.className = ''.
- Која је разлика између className и classList?
- className поставља или добија цео атрибут класе, док classList омогућава детаљнију манипулацију класама.
- Како да проверим да ли елемент има одређену класу?
- Користити classList.contains метод: element.classList.contains('classname').
- Како да пребацим класу на елемент?
- Користити classList.toggle метод: element.classList.toggle('classname').
- Да ли могу да користим јКуери за манипулисање класама?
- Да, јКуери пружа методе као што су addClass, removeClass, и toggleClass.
- Шта је жива ДОМТокенЛист?
- А DOMTokenList је жива колекција која се аутоматски ажурира када се промени атрибут класе елемента.
- Ис classList подржано у свим претраживачима?
- classList је подржан у свим модерним претраживачима, али старије верзије Интернет Екплорер-а га можда неће у потпуности подржавати.
- Како могу да динамички додам класе на основу услова?
- Можете користити if искази у комбинацији са classList.add или classList.remove да наставу примењује условно.
Кључне технике за динамичке промене класа
Достављене скрипте показују како да промените класу ХТМЛ елемента користећи ЈаваСцрипт и јКуери као одговор на догађај клика. У првој скрипти, обичан ЈаваСцрипт се користи за постизање ове функционалности. Тхе getElementById метода се користи за одабир елемента дугмета са ИД-ом 'миБуттон'. Тхе onclick догађај се затим додељује овом елементу, одређујући функцију која ће се извршити када се кликне на дугме. Унутар ове функције, дугме className својство је подешено на 'промењено', мењајући своју класу, а потом и стил како је дефинисано у ЦСС-у. Ова скрипта ефикасно приказује једноставност и директност коришћења обичног ЈаваСцрипт-а за ДОМ манипулацију.
Друга скрипта илуструје исту функционалност користећи јКуери, популарну ЈаваСцрипт библиотеку која поједностављује кретање и манипулацију ХТМЛ документима. Овде, јКуери алиас $ се користи за избор елемента дугмета. Тхе click затим се примењује метод за подешавање руковаоца догађаја за клик догађај. Унутар овог руковаоца, класа дугмета се мења помоћу јКуери-ја removeClass и addClass методе. Ове методе обезбеђују згодан начин за манипулисање класама елемента, нудећи читљивији и сажетији приступ у поређењу са обичним ЈаваСцрипт-ом. Обе скрипте имају за циљ да покажу како различити алати могу постићи исти циљ динамичке промене класе елемента на основу интеракције корисника.
Сумирање кључних тачака
Манипулисање класом ХТМЛ елемента помоћу ЈаваСцрипт-а или јКуери-ја пружа једноставан начин за динамичко ажурирање стила и понашања елемента. Разумевањем и коришћењем метода као што су className, classList, и јКуери методе манипулације класом, програмери могу побољшати интерактивност и одзив својих веб страница, чинећи их привлачнијим за кориснике.