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.

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 metode tiek izmantota, lai atlasītu pogas elementu ar ID 'myButton'. The 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 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 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 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 īpašumu, kas nodrošina elastīgāku un jaudīgāku veidu darbam ar nodarbībām. The rekvizīts atgriež dzīvu elementa klases atribūtu DOMTokenList kolekciju. Izmantojot , varat pievienot, noņemt, pārslēgt un pārbaudīt klases, neietekmējot citas klases, kas varētu tikt lietotas elementam.

Piemēram, metodi var izmantot, lai elementam pievienotu vienu vai vairākas klases, savukārt metode var noņemt vienu vai vairākas norādītās klases. The 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.

Kā elementam pievienot vairākas klases?
Izmantojiet metode ar vairākiem argumentiem: .
Vai es varu noņemt visas klases no elementa?
Jā, jūs varat izmantot rekvizītu un iestatiet to uz tukšu virkni: .
Kāda ir atšķirība starp un ?
iestata vai iegūst visas klases atribūtu, savukārt ļauj detalizētāk manipulēt ar klasēm.
Kā pārbaudīt, vai elementam ir noteikta klase?
Izmantojiet metode: .
Kā elementā pārslēgt klasi?
Izmantojiet metode: .
Vai es varu izmantot jQuery, lai manipulētu ar klasēm?
Jā, jQuery nodrošina tādas metodes kā , , un .
Kas ir tiešraides DOMTokenList?
A ir tiešraides kolekcija, kas tiek automātiski atjaunināta, kad mainās elementa klases atribūts.
Ir tiek atbalstīts visās pārlūkprogrammās?
tiek atbalstīts visās mūsdienu pārlūkprogrammās, taču vecākas Internet Explorer versijas to var pilnībā neatbalstīt.
Kā es varu dinamiski pievienot klases, pamatojoties uz nosacījumiem?
Tu vari izmantot paziņojumi kombinācijā ar vai nodarbības pieteikties nosacīti.

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

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ā , , 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.