Kako spremeniti razred elementa HTML z uporabo JavaScripta

Mia Chevalier
četrtek, 27. junij 2024 15:07:44
JavaScript

Posodabljanje razredov z JavaScriptom

JavaScript ponuja zmogljiva orodja za dinamično interakcijo in upravljanje elementov HTML. Ena pogosta naloga je spreminjanje razreda elementa HTML kot odgovor na dogodke, kot je onclick.

Ta priročnik bo prikazal, kako uporabiti JavaScript za spreminjanje razreda elementa, kar bo omogočilo dinamične spremembe sloga in obnašanja na vaših spletnih straneh. Ne glede na to, ali se odzovete na klik gumba ali drug dogodek, bodo te tehnike izboljšale vaše sposobnosti spletnega razvoja.

Ukaz Opis
className Nastavi ali vrne atribut razreda elementa. Uporablja se za spreminjanje razreda elementa.
getElementById Vrne element, ki ima atribut ID s podano vrednostjo. Uporablja se za izbiro elementa gumba.
onclick Nastavi funkcijo, ki naj se izvede, ko pride do dogodka klika na elementu.
removeClass Odstrani eno ali več imen razredov iz izbranih elementov v jQuery.
addClass Izbranim elementom v jQuery doda eno ali več imen razredov.
$ Vzdevek za jQuery, ki se uporablja za izbiro elementov in izvajanje dejanj na njih.

Razumevanje manipulacije razredov JavaScript

Priloženi skripti prikazujejo, kako spremeniti razred elementa HTML z uporabo JavaScript in jQuery kot odgovor na dogodek klika. V prvem skriptu je za doseganje te funkcije uporabljen navaden JavaScript. The metoda se uporablja za izbiro elementa gumba z ID-jem 'myButton'. The dogodek je nato dodeljen temu elementu in določa funkcijo, ki naj se izvede ob kliku gumba. Znotraj te funkcije je gumb lastnost je nastavljena na 'spremenjeno', s čimer se spremeni njen razred in nato slog, kot je definirano v CSS. Ta skript učinkovito prikazuje preprostost in neposrednost uporabe navadnega JavaScripta za manipulacijo DOM.

Drugi skript ponazarja isto funkcionalnost z uporabo jQuery, priljubljene knjižnice JavaScript, ki poenostavlja prehod in manipulacijo dokumentov HTML. Tukaj je vzdevek jQuery se uporablja za izbiro elementa gumba. The se nato uporabi za nastavitev obdelovalca dogodkov za dogodek klika. V tem upravljalniku je razred gumba spremenjen z uporabo jQuery in addClass metode. Te metode zagotavljajo priročen način za manipulacijo razredov elementa, saj ponujajo bolj berljiv in jedrnat pristop v primerjavi z navadnim JavaScriptom. Oba skripta želita prikazati, kako lahko različna orodja dosežejo isti cilj dinamičnega spreminjanja razreda elementa na podlagi interakcije uporabnika.

Spreminjanje razreda elementa ob kliku z uporabo JavaScripta

JavaScript in 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>

Posodabljanje razreda elementa HTML z uporabo jQuery

JavaScript z jQuery

// 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 manipulacijo razredov v JavaScriptu

Poleg osnovnih sprememb razreda kot odziv na dogodke JavaScript ponuja naprednejše tehnike za manipulacijo seznama razredov elementa. Ena takih metod je lastnosti, ki zagotavlja bolj prilagodljiv in zmogljiv način za delo z razredi. The lastnost vrne živo zbirko atributov razreda elementa DOMTokenList. Uporaba , lahko dodate, odstranite, preklapljate in preverjate razrede, ne da bi to vplivalo na druge razrede, ki bi lahko bili uporabljeni za element.

Na primer, metodo lahko uporabite za dodajanje enega ali več razredov elementu, medtem ko metoda lahko odstrani enega ali več navedenih razredov. The metoda je še posebej uporabna, saj doda razred, če ne obstaja, in ga odstrani, če obstaja, zaradi česar je idealna za naloge, kot je izvajanje preklopov temnega načina. Poleg tega je contains metoda preveri, ali element vsebuje določen razred, kar je lahko uporabno za pogojno uporabo slogov ali vedenj na podlagi trenutnega stanja elementa.

  1. Kako elementu dodam več razredov?
  2. Uporabi metoda z več argumenti: .
  3. Ali lahko iz elementa odstranim vse razrede?
  4. Da, lahko uporabite in jo nastavite na prazen niz: .
  5. Kaj je razlika med in ?
  6. nastavi ali pridobi celoten atribut razreda, medtem ko omogoča bolj natančno manipulacijo razredov.
  7. Kako preverim, ali ima element določen razred?
  8. Uporabi metoda: .
  9. Kako preklopim razred na elementu?
  10. Uporabi metoda: .
  11. Ali lahko uporabljam jQuery za manipulacijo razredov?
  12. Da, jQuery ponuja metode, kot je , , in .
  13. Kaj je živi DOMTokenList?
  14. A je zbirka v živo, ki se samodejno posodobi, ko se spremeni atribut razreda elementa.
  15. je podprt v vseh brskalnikih?
  16. je podprt v vseh sodobnih brskalnikih, vendar ga starejše različice Internet Explorerja morda ne podpirajo v celoti.
  17. Kako lahko dinamično dodam razrede glede na pogoje?
  18. Lahko uporabiš izjave v kombinaciji z oz pogojno uporabljati razrede.

Ključne tehnike za dinamične spremembe razreda

Priloženi skripti prikazujejo, kako spremeniti razred elementa HTML z uporabo JavaScript in jQuery kot odgovor na dogodek klika. V prvem skriptu je za doseganje te funkcije uporabljen navaden JavaScript. The metoda se uporablja za izbiro elementa gumba z ID-jem 'myButton'. The dogodek je nato dodeljen temu elementu in določa funkcijo, ki naj se izvede ob kliku gumba. Znotraj te funkcije je gumb lastnost je nastavljena na 'spremenjeno', s čimer se spremeni njen razred in nato slog, kot je definirano v CSS. Ta skript učinkovito prikazuje preprostost in neposrednost uporabe navadnega JavaScripta za manipulacijo DOM.

Drugi skript ponazarja isto funkcionalnost z uporabo jQuery, priljubljene knjižnice JavaScript, ki poenostavlja prehod in manipulacijo dokumentov HTML. Tukaj je vzdevek jQuery se uporablja za izbiro elementa gumba. The se nato uporabi za nastavitev obdelovalca dogodkov za dogodek klika. V tem upravljalniku je razred gumba spremenjen z uporabo jQuery in addClass metode. Te metode zagotavljajo priročen način za manipulacijo razredov elementa, saj ponujajo bolj berljiv in jedrnat pristop v primerjavi z navadnim JavaScriptom. Oba skripta želita prikazati, kako lahko različna orodja dosežejo isti cilj dinamičnega spreminjanja razreda elementa na podlagi interakcije uporabnika.

Manipulacija razreda elementa HTML z uporabo JavaScripta ali jQuery zagotavlja preprost način za dinamično posodabljanje sloga in obnašanja elementa. Z razumevanjem in uporabo metod, kot je , in metode manipulacije razreda jQuery lahko razvijalci izboljšajo interaktivnost in odzivnost svojih spletnih strani, zaradi česar postanejo bolj privlačne za uporabnike.