Kuidas muuta HTML-i elemendi klassi JavaScripti abil

Mia Chevalier
Neljapäev, 27. juuni 2024 14:03:08
JavaScript

Klasside värskendamine JavaScriptiga

JavaScript pakub võimsaid tööriistu HTML-elementidega dünaamiliseks suhtlemiseks ja nendega manipuleerimiseks. Üks levinud ülesanne on HTML-elemendi klassi muutmine vastuseks sellistele sündmustele nagu onclick.

See juhend näitab, kuidas kasutada JavaScripti elemendi klassi muutmiseks, võimaldades teie veebilehtedel dünaamilist stiili ja käitumist muuta. Olenemata sellest, kas reageerite nupuklõpsule või mõnele muule sündmusele, parandavad need tehnikad teie veebiarendusoskusi.

Käsk Kirjeldus
className Määrab või tagastab elemendi klassi atribuudi. Kasutatakse elemendi klassi muutmiseks.
getElementById Tagastab elemendi, millel on määratud väärtusega ID atribuut. Kasutatakse nupu elemendi valimiseks.
onclick Määrab funktsiooni, mis käivitatakse, kui elemendil toimub klõpsamissündmus.
removeClass Eemaldab jQuery valitud elementidelt ühe või mitu klassinime.
addClass Lisab jQuery valitud elementidele ühe või mitu klassinime.
$ jQuery pseudonüüm, mida kasutatakse elementide valimiseks ja nendega toimingute tegemiseks.

JavaScripti klassi manipuleerimise mõistmine

Kaasasolevad skriptid näitavad, kuidas klõpsamissündmusele vastuseks JavaScripti ja jQuery abil HTML-elemendi klassi muuta. Esimeses skriptis kasutatakse selle funktsiooni saavutamiseks tavalist JavaScripti. The meetodit kasutatakse nupu elemendi valimiseks ID-ga 'myButton'. The Seejärel määratakse sellele elemendile sündmus, mis määrab nupu klõpsamisel käivitatava funktsiooni. Selle funktsiooni sees on nupp atribuut on seatud väärtusele 'muutatud', muutes selle klassi ja seejärel selle stiili, nagu on määratletud CSS-is. See skript näitab tõhusalt lihtsa JavaScripti kasutamise lihtsust ja otsekohesust DOM-i manipuleerimiseks.

Teine skript illustreerib samu funktsioone, kasutades jQueryt, populaarset JavaScripti teeki, mis lihtsustab HTML-dokumentide läbimist ja manipuleerimist. Siin on jQuery varjunimi kasutatakse nupu elemendi valimiseks. The Seejärel rakendatakse klõpsamissündmuse jaoks sündmuste käitleja seadistamiseks meetodit. Selles töötlejas muudetakse nupu klassi jQuery abil ja addClass meetodid. Need meetodid pakuvad mugavat viisi elemendi klassidega manipuleerimiseks, pakkudes tavalise JavaScriptiga võrreldes loetavamat ja ülevaatlikumat lähenemist. Mõlema skripti eesmärk on näidata, kuidas erinevad tööriistad suudavad saavutada sama eesmärgi, muuta elemendi klassi dünaamiliselt kasutaja interaktsiooni alusel.

Elemendi klassi muutmine klõpsamisel JavaScripti abil

JavaScript ja 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-i elemendi klassi värskendamine jQuery abil

JavaScript koos jQueryga

// 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>

Klassi manipuleerimise täiustatud tehnikad JavaScriptis

Lisaks sündmustele reageerivatele põhilistele klassimuudatustele pakub JavaScript täiustatud tehnikaid elemendi klassiloendiga manipuleerimiseks. Üks selline meetod on atribuut, mis pakub paindlikumat ja võimsamat viisi klassidega töötamiseks. The atribuut tagastab elemendi klassiatribuutide reaalajas kogumi DOMTokenList. Kasutades , saate klasse lisada, eemaldada, ümber lülitada ja otsida, ilma et see mõjutaks teisi klasse, mida elemendile võidakse rakendada.

Näiteks meetodit saab kasutada ühe või mitme klassi lisamiseks elemendile, samas kui meetod võib eemaldada ühe või mitu määratud klassi. The meetod on eriti kasulik, kuna see lisab klassi, kui seda pole, ja eemaldab selle, kui see on olemas, muutes selle ideaalseks selliste ülesannete jaoks nagu tumeda režiimi lülitite rakendamine. Lisaks on contains meetod kontrollib, kas element sisaldab kindlat klassi, mis võib olla kasulik stiilide või käitumisviiside tingimuslikuks rakendamiseks elemendi hetkeoleku põhjal.

  1. Kuidas lisada elemendile mitu klassi?
  2. Kasuta mitme argumendiga meetod: .
  3. Kas ma saan elemendist eemaldada kõik klassid?
  4. Jah, saate kasutada atribuut ja määrake see tühjaks stringiks: .
  5. Mis on vahet ja ?
  6. määrab või hangib kogu klassi atribuudi, kusjuures võimaldab klassidega detailsemat manipuleerimist.
  7. Kuidas kontrollida, kas elemendil on kindel klass?
  8. Kasuta meetod: .
  9. Kuidas lülitada klassi elemendil sisse?
  10. Kasuta meetod: .
  11. Kas ma saan klassidega manipuleerimiseks kasutada jQueryt?
  12. Jah, jQuery pakub selliseid meetodeid nagu , , ja .
  13. Mis on reaalajas DOMTokenList?
  14. A on reaalajas kogu, mida värskendatakse automaatselt, kui elemendi klassi atribuut muutub.
  15. On toetatud kõigis brauserites?
  16. on toetatud kõigis kaasaegsetes brauserites, kuid Internet Exploreri vanemad versioonid ei pruugi seda täielikult toetada.
  17. Kuidas ma saan tingimuste alusel klasse dünaamiliselt lisada?
  18. Sa võid kasutada avaldused koos või klasse tinglikult rakendada.

Dünaamiliste klassimuudatuste põhitehnikad

Kaasasolevad skriptid näitavad, kuidas klõpsamissündmusele vastuseks JavaScripti ja jQuery abil HTML-elemendi klassi muuta. Esimeses skriptis kasutatakse selle funktsiooni saavutamiseks tavalist JavaScripti. The meetodit kasutatakse nupu elemendi valimiseks ID-ga 'myButton'. The Seejärel määratakse sellele elemendile sündmus, mis määrab nupu klõpsamisel käivitatava funktsiooni. Selle funktsiooni sees on nupp atribuut on seatud väärtusele 'muutatud', muutes selle klassi ja seejärel CSS-is määratletud stiili. See skript näitab tõhusalt lihtsa JavaScripti kasutamise lihtsust ja otsekohesust DOM-i manipuleerimiseks.

Teine skript illustreerib samu funktsioone jQuery abil, populaarse JavaScripti teegiga, mis lihtsustab HTML-dokumentide läbimist ja manipuleerimist. Siin on jQuery varjunimi kasutatakse nupu elemendi valimiseks. The Seejärel rakendatakse meetodit, et seadistada klikisündmuse jaoks sündmuste töötleja. Selles töötlejas muudetakse nupu klassi jQuery abil ja addClass meetodid. Need meetodid pakuvad mugavat viisi elemendi klassidega manipuleerimiseks, pakkudes tavalise JavaScriptiga võrreldes loetavamat ja ülevaatlikumat lähenemist. Mõlema skripti eesmärk on näidata, kuidas erinevad tööriistad suudavad saavutada sama eesmärgi, muuta elemendi klassi dünaamiliselt kasutaja interaktsiooni alusel.

HTML-elemendi klassi manipuleerimine JavaScripti või jQuery abil on lihtne viis elemendi stiili ja käitumise dünaamiliseks värskendamiseks. Mõistes ja kasutades selliseid meetodeid nagu , , ja jQuery klasside manipuleerimise meetodid, saavad arendajad suurendada oma veebilehtede interaktiivsust ja reageerimisvõimet, muutes need kasutajate jaoks köitvamaks.