Ažuriranje razreda s JavaScriptom
JavaScript pruža moćne alate za dinamičku interakciju i manipuliranje HTML elementima. Jedan uobičajeni zadatak je promjena klase HTML elementa kao odgovor na događaje kao što je onclick.
Ovaj će vodič pokazati kako koristiti JavaScript za promjenu klase elementa, dopuštajući dinamičke promjene stila i ponašanja na vašim web stranicama. Bez obzira reagirate li na klik na gumb ili neki drugi događaj, ove će tehnike unaprijediti vaše vještine web-razvoja.
| Naredba | Opis |
|---|---|
| className | Postavlja ili vraća atribut klase elementa. Koristi se za promjenu klase elementa. |
| getElementById | Vraća element koji ima ID atribut s navedenom vrijednošću. Koristi se za odabir elementa gumba. |
| onclick | Postavlja funkciju koja će se izvršiti kada se na elementu dogodi klik. |
| removeClass | Uklanja jedno ili više naziva klasa iz odabranih elemenata u jQueryju. |
| addClass | Dodaje jedno ili više naziva klasa odabranim elementima u jQueryju. |
| $ | Alias za jQuery, koristi se za odabir elemenata i izvođenje radnji na njima. |
Razumijevanje manipulacije JavaScript klasama
Pružene skripte pokazuju kako promijeniti klasu HTML elementa koristeći JavaScript i jQuery kao odgovor na događaj klika. U prvoj skripti koristi se običan JavaScript za postizanje ove funkcije. The koristi se za odabir elementa gumba s ID-om 'myButton'. The događaj se zatim dodjeljuje ovom elementu, određujući funkciju koja će se izvršiti kada se klikne gumb. Unutar ove funkcije nalazi se gumb svojstvo je postavljeno na 'promijenjeno', mijenjajući svoju klasu, a potom i stil kako je definirano u CSS-u. Ova skripta učinkovito prikazuje jednostavnost i izravnost korištenja običnog JavaScripta za manipulaciju DOM-om.
Druga skripta ilustrira istu funkcionalnost koristeći jQuery, popularnu JavaScript biblioteku koja pojednostavljuje prolazak i manipulaciju HTML dokumentom. Ovdje, jQuery alias koristi se za odabir elementa gumba. The zatim se primjenjuje za postavljanje rukovatelja događajem za događaj klika. Unutar ovog rukovatelja, klasa gumba je modificirana pomoću jQueryja i addClass metode. Ove metode pružaju prikladan način za manipuliranje klasama elementa, nudeći čitljiviji i koncizniji pristup u usporedbi s običnim JavaScriptom. Obje skripte imaju za cilj pokazati kako različiti alati mogu postići isti cilj dinamičke promjene klase elementa na temelju interakcije korisnika.
Promjena klase elementa na klik pomoću JavaScripta
JavaScript i HTML
// 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>
Ažuriranje klase HTML elementa pomoću jQueryja
JavaScript s jQueryjem
// 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>
Napredne tehnike za manipulaciju klasama u JavaScriptu
Osim osnovnih promjena klase kao odgovor na događaje, JavaScript nudi naprednije tehnike za manipuliranje popisom klasa elementa. Jedna takva metoda je vlasništvo, koje pruža fleksibilniji i snažniji način rada s klasama. The svojstvo vraća živu kolekciju DOMTokenList atributa klase elementa. Korištenje , možete dodavati, uklanjati, mijenjati i provjeravati klase bez utjecaja na druge klase koje se mogu primijeniti na element.
Na primjer, metoda se može koristiti za dodavanje jedne ili više klasa elementu, dok metoda može ukloniti jednu ili više navedenih klasa. The Metoda je posebno korisna jer dodaje klasu ako ne postoji i uklanja je ako postoji, što je čini idealnom za zadatke kao što je implementacija prekidača tamnog načina rada. Osim toga, contains metoda provjerava sadrži li element određenu klasu, što može biti korisno za uvjetnu primjenu stilova ili ponašanja na temelju trenutnog stanja elementa.
- Kako mogu dodati više klasa jednom elementu?
- Koristiti metoda s više argumenata: .
- Mogu li ukloniti sve klase iz elementa?
- Da, možete koristiti svojstvo i postavite ga na prazan niz: .
- Koja je razlika između i ?
- postavlja ili dobiva cijeli atribut klase, dok omogućuje detaljniju manipulaciju klasama.
- Kako mogu provjeriti ima li element određenu klasu?
- Koristiti metoda: .
- Kako mogu promijeniti klasu na elementu?
- Koristiti metoda: .
- Mogu li koristiti jQuery za manipuliranje klasama?
- Da, jQuery pruža metode poput , , i .
- Što je živi DOMTokenList?
- A je kolekcija uživo koja se automatski ažurira kada se promijeni atribut klase elementa.
- Je podržan u svim preglednicima?
- je podržan u svim modernim preglednicima, ali starije verzije Internet Explorera ga možda neće u potpunosti podržavati.
- Kako mogu dinamički dodavati klase na temelju uvjeta?
- Možeš koristiti izjave u kombinaciji s ili primijeniti nastavu uvjetno.
Ključne tehnike za dinamičke promjene klase
Pružene skripte pokazuju kako promijeniti klasu HTML elementa koristeći JavaScript i jQuery kao odgovor na događaj klika. U prvoj skripti koristi se običan JavaScript za postizanje ove funkcije. The koristi se za odabir elementa gumba s ID-om 'myButton'. The događaj se zatim dodjeljuje ovom elementu, određujući funkciju koja će se izvršiti kada se klikne gumb. Unutar ove funkcije nalazi se gumb svojstvo je postavljeno na 'promijenjeno', mijenjajući svoju klasu, a potom i stil kako je definirano u CSS-u. Ova skripta učinkovito prikazuje jednostavnost i izravnost korištenja običnog JavaScripta za manipulaciju DOM-om.
Druga skripta ilustrira istu funkcionalnost koristeći jQuery, popularnu JavaScript biblioteku koja pojednostavljuje prolazak i manipulaciju HTML dokumentom. Ovdje, jQuery alias koristi se za odabir elementa gumba. The metoda se zatim primjenjuje za postavljanje rukovatelja događajem za događaj klika. Unutar ovog rukovatelja, klasa gumba je modificirana pomoću jQueryja i addClass metode. Ove metode pružaju prikladan način za manipuliranje klasama elementa, nudeći čitljiviji i koncizniji pristup u usporedbi s običnim JavaScriptom. Obje skripte imaju za cilj pokazati kako različiti alati mogu postići isti cilj dinamičke promjene klase elementa na temelju interakcije korisnika.
Manipulacija klasom HTML elementa pomoću JavaScripta ili jQueryja pruža jednostavan način dinamičkog ažuriranja stila i ponašanja elementa. Razumijevanjem i korištenjem metoda poput , , i jQueryjevih metoda manipulacije klasama, programeri mogu poboljšati interaktivnost i odziv svojih web stranica, čineći ih privlačnijim za korisnike.