Kā mainīt HTML elementa klasi, izmantojot JavaScript

Temp mail SuperHeros
Kā mainīt HTML elementa klasi, izmantojot JavaScript
Kā mainīt HTML elementa klasi, izmantojot JavaScript
Mia Chevalier
Ceturtdiena, 2024. gada 27. jūnijs 14:34:04

Nodarbību atjaunināšana ar JavaScript

JavaScript nodrošina jaudīgus rīkus, lai dinamiski mijiedarbotos ar HTML elementiem un manipulētu ar tiem. Viens izplatīts uzdevums ir mainīt HTML elementa klasi, reaģējot uz tādiem notikumiem kā onclick.

Šajā rokasgrāmatā tiks parādīts, kā izmantot JavaScript, lai mainītu elementa klasi, ļaujot veikt dinamiskas stila un uzvedības izmaiņas jūsu tīmekļa lapās. Neatkarīgi no tā, vai reaģējat uz pogas klikšķi vai citu notikumu, šīs metodes uzlabos jūsu tīmekļa izstrādes prasmes.

Komanda Apraksts
className Iestata vai atgriež elementa klases atribūtu. Izmanto, lai mainītu elementa klasi.
getElementById Atgriež elementu, kuram ir ID atribūts ar norādīto vērtību. Izmanto, lai atlasītu pogas elementu.
onclick Iestata funkciju, kas jāizpilda, kad elementā notiek klikšķa notikums.
removeClass No jQuery atlasītajiem elementiem noņem vienu vai vairākus klašu nosaukumus.
addClass Pievieno vienu vai vairākus klašu nosaukumus atlasītajiem elementiem programmā jQuery.
$ jQuery aizstājvārds, ko izmanto, lai atlasītu elementus un veiktu ar tiem darbības.

Izpratne par JavaScript klases manipulācijām

Piedāvātie skripti parāda, kā mainīt HTML elementa klasi, izmantojot JavaScript un jQuery, reaģējot uz klikšķa notikumu. Pirmajā skriptā šīs funkcijas sasniegšanai tiek izmantots vienkāršs JavaScript. The getElementById metode tiek izmantota, lai atlasītu pogas elementu ar ID 'myButton'. The onclick pēc tam šim elementam tiek piešķirts notikums, norādot funkciju, kas jāizpilda, noklikšķinot uz pogas. Šīs funkcijas iekšpusē ir poga className rekvizīts ir iestatīts uz “mainīts”, mainot tā klasi un pēc tam tā stilu, kā noteikts CSS. Šis skripts efektīvi parāda vienkārša JavaScript izmantošanas vienkāršību un tiešumu DOM manipulācijām.

Otrais skripts ilustrē to pašu funkcionalitāti, izmantojot jQuery, populāru JavaScript bibliotēku, kas vienkāršo HTML dokumentu pārvietošanu un manipulācijas. Šeit ir jQuery aizstājvārds $ tiek izmantots, lai atlasītu pogas elementu. The click metode tiek lietota, lai klikšķa notikumam iestatītu notikumu apdarinātāju. Šajā apdarinātājā pogas klase tiek modificēta, izmantojot jQuery's removeClass un addClass metodes. Šīs metodes nodrošina ērtu veidu, kā manipulēt ar elementa klasēm, piedāvājot lasāmāku un kodolīgāku pieeju salīdzinājumā ar vienkāršu JavaScript. Abu skriptu mērķis ir parādīt, kā dažādi rīki var sasniegt vienu un to pašu mērķi, dinamiski mainīt elementa klasi, pamatojoties uz lietotāja mijiedarbību.

Elementa klases maiņa uz klikšķi, izmantojot JavaScript

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

HTML elementa klases atjaunināšana, izmantojot jQuery

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

Uzlabotas metodes klašu manipulācijai JavaScript

Papildus pamata klases izmaiņām, reaģējot uz notikumiem, JavaScript piedāvā uzlabotas metodes, lai manipulētu ar elementa klašu sarakstu. Viena no šādām metodēm ir classList īpašumu, kas nodrošina elastīgāku un jaudīgāku veidu darbam ar nodarbībām. The classList rekvizīts atgriež dzīvu elementa klases atribūtu DOMTokenList kolekciju. Izmantojot classList, varat pievienot, noņemt, pārslēgt un pārbaudīt klases, neietekmējot citas klases, kas varētu tikt lietotas elementam.

Piemēram, add metodi var izmantot, lai elementam pievienotu vienu vai vairākas klases, savukārt remove metode var noņemt vienu vai vairākas norādītās klases. The toggle metode ir īpaši noderīga, jo tā pievieno klasi, ja tā neeksistē, un noņem to, ja tā pastāv, padarot to ideāli piemērotu tādiem uzdevumiem kā tumšā režīma pārslēgšanas ieviešana. Turklāt, contains metode pārbauda, ​​vai elementā ir noteikta klase, kas var būt noderīga, lai nosacīti piemērotu stilus vai uzvedību, pamatojoties uz elementa pašreizējo stāvokli.

Bieži uzdotie jautājumi par JavaScript klases manipulācijām

  1. Kā elementam pievienot vairākas klases?
  2. Izmantojiet classList.add metode ar vairākiem argumentiem: element.classList.add('class1', 'class2').
  3. Vai es varu noņemt visas klases no elementa?
  4. Jā, jūs varat izmantot className rekvizītu un iestatiet to uz tukšu virkni: element.className = ''.
  5. Kāda ir atšķirība starp className un classList?
  6. className iestata vai iegūst visas klases atribūtu, savukārt classList ļauj detalizētāk manipulēt ar klasēm.
  7. Kā pārbaudīt, vai elementam ir noteikta klase?
  8. Izmantojiet classList.contains metode: element.classList.contains('classname').
  9. Kā elementā pārslēgt klasi?
  10. Izmantojiet classList.toggle metode: element.classList.toggle('classname').
  11. Vai es varu izmantot jQuery, lai manipulētu ar klasēm?
  12. Jā, jQuery nodrošina tādas metodes kā addClass, removeClass, un toggleClass.
  13. Kas ir tiešraides DOMTokenList?
  14. A DOMTokenList ir tiešraides kolekcija, kas tiek automātiski atjaunināta, kad mainās elementa klases atribūts.
  15. Ir classList tiek atbalstīts visās pārlūkprogrammās?
  16. classList tiek atbalstīts visās mūsdienu pārlūkprogrammās, taču vecākas Internet Explorer versijas to var pilnībā neatbalstīt.
  17. Kā es varu dinamiski pievienot klases, pamatojoties uz nosacījumiem?
  18. Tu vari izmantot if paziņojumi kombinācijā ar classList.add vai classList.remove nodarbības pieteikties nosacīti.

Galvenās metodes dinamiskām klases izmaiņām

Piedāvātie skripti parāda, kā mainīt HTML elementa klasi, izmantojot JavaScript un jQuery, reaģējot uz klikšķa notikumu. Pirmajā skriptā šīs funkcijas sasniegšanai tiek izmantots vienkāršs JavaScript. The getElementById metode tiek izmantota, lai atlasītu pogas elementu ar ID 'myButton'. The onclick pēc tam šim elementam tiek piešķirts notikums, norādot funkciju, kas jāizpilda, noklikšķinot uz pogas. Šīs funkcijas iekšpusē ir poga className rekvizīts ir iestatīts uz “mainīts”, mainot tā klasi un pēc tam tā stilu, kā noteikts CSS. Šis skripts efektīvi parāda vienkārša JavaScript izmantošanas vienkāršību un tiešumu DOM manipulācijām.

Otrais skripts ilustrē to pašu funkcionalitāti, izmantojot jQuery, populāru JavaScript bibliotēku, kas vienkāršo HTML dokumentu pārvietošanu un manipulācijas. Šeit ir jQuery aizstājvārds $ tiek izmantots, lai atlasītu pogas elementu. The click metode tiek lietota, lai klikšķa notikumam iestatītu notikumu apdarinātāju. Šajā apdarinātājā pogas klase tiek modificēta, izmantojot jQuery's removeClass un addClass metodes. Šīs metodes nodrošina ērtu veidu, kā manipulēt ar elementa klasēm, piedāvājot lasāmāku un kodolīgāku pieeju salīdzinājumā ar vienkāršu JavaScript. Abu skriptu mērķis ir parādīt, kā dažādi rīki var sasniegt vienu un to pašu mērķi, dinamiski mainīt elementa klasi, pamatojoties uz lietotāja mijiedarbību.

Apkopojot galvenos punktus

Manipulēšana ar HTML elementa klasi, izmantojot JavaScript vai jQuery, nodrošina vienkāršu veidu, kā dinamiski atjaunināt elementa stilu un darbību. Izprotot un izmantojot tādas metodes kā className, classList, un jQuery klases manipulācijas metodes, izstrādātāji var uzlabot savu tīmekļa lapu interaktivitāti un atsaucību, padarot tās lietotājiem saistošākas.