Kaip pakeisti HTML elemento klasę naudojant „JavaScript“.

Temp mail SuperHeros
Kaip pakeisti HTML elemento klasę naudojant „JavaScript“.
Kaip pakeisti HTML elemento klasę naudojant „JavaScript“.
Mia Chevalier
2024 m. birželio 27 d., ketvirtadienis 14:36:35

Klasių atnaujinimas naudojant JavaScript

„JavaScript“ suteikia galingų įrankių, leidžiančių dinamiškai sąveikauti su HTML elementais ir jais manipuliuoti. Viena dažna užduotis yra pakeisti HTML elemento klasę, reaguojant į tokius įvykius kaip onclick.

Šiame vadove bus parodyta, kaip naudoti „JavaScript“ norint pakeisti elemento klasę, kad būtų galima dinamiškai keisti tinklalapių stilių ir elgseną. Nesvarbu, ar reaguojate į mygtuko paspaudimą ar kitą įvykį, šie metodai pagerins jūsų žiniatinklio kūrimo įgūdžius.

komandą apibūdinimas
className Nustato arba grąžina elemento klasės atributą. Naudojamas elemento klasei pakeisti.
getElementById Grąžina elementą, turintį ID atributą su nurodyta reikšme. Naudojamas mygtuko elementui pasirinkti.
onclick Nustato funkciją, kuri turi būti vykdoma, kai elemente įvyksta paspaudimo įvykis.
removeClass Pašalina vieną ar daugiau klasių pavadinimų iš pasirinktų „jQuery“ elementų.
addClass Prideda vieną ar daugiau klasių pavadinimų prie pasirinktų „jQuery“ elementų.
$ „jQuery“ pseudonimas, naudojamas elementams pasirinkti ir su jais atlikti veiksmus.

„JavaScript“ klasės manipuliavimo supratimas

Pateikti scenarijai parodo, kaip pakeisti HTML elemento klasę naudojant JavaScript ir jQuery reaguojant į paspaudimo įvykį. Pirmajame scenarijuje šiai funkcijai pasiekti naudojamas paprastas JavaScript. The getElementById metodas naudojamas mygtuko elementui su ID „myButton“ pasirinkti. The onclick Tada šiam elementui priskiriamas įvykis, nurodant funkciją, kuri turi būti vykdoma spustelėjus mygtuką. Šios funkcijos viduje yra mygtukas className ypatybė nustatoma į „pakeista“, pakeičiant jos klasę, o vėliau ir stilių, kaip apibrėžta CSS. Šis scenarijus efektyviai parodo paprasto JavaScript naudojimo DOM manipuliavimui paprastumą ir tiesiogiškumą.

Antrasis scenarijus iliustruoja tas pačias funkcijas naudojant jQuery – populiarią „JavaScript“ biblioteką, kuri supaprastina HTML dokumentų perėjimą ir manipuliavimą. Čia yra jQuery slapyvardis $ naudojamas mygtuko elementui pasirinkti. The click Tada taikomas metodas paspaudimo įvykio įvykių tvarkyklei nustatyti. Šioje tvarkyklėje mygtuko klasė modifikuojama naudojant jQuery removeClass ir addClass metodus. Šie metodai suteikia patogų būdą manipuliuoti elementų klasėmis ir siūlo skaitomesnį ir glaustesnį metodą, palyginti su paprastu JavaScript. Abiejų scenarijų tikslas – parodyti, kaip skirtingi įrankiai gali pasiekti tą patį tikslą – dinamiškai keisti elemento klasę, remiantis vartotojo sąveika.

Elemento klasės keitimas spustelėjus naudojant „JavaScript“.

JavaScript ir 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 elemento klasės atnaujinimas naudojant jQuery

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

Pažangūs manipuliavimo klase metodais JavaScript

Be pagrindinių klasės pakeitimų, reaguojant į įvykius, „JavaScript“ siūlo pažangesnius metodus, kaip valdyti elemento klasių sąrašą. Vienas iš tokių metodų yra classList nuosavybė, kuri suteikia lankstesnį ir efektyvesnį būdą dirbti su klasėmis. The classList ypatybė grąžina tiesioginį elemento klasės atributų rinkinį DOMTokenList. Naudojant classList, galite pridėti, pašalinti, perjungti ir patikrinti klases, nepaveikdami kitų klasių, kurios gali būti taikomos elementui.

Pavyzdžiui, add metodas gali būti naudojamas norint pridėti vieną ar daugiau klasių prie elemento, o remove metodas gali pašalinti vieną ar daugiau nurodytų klasių. The toggle Metodas yra ypač naudingas, nes prideda klasę, jei jos nėra, ir pašalina, jei yra, todėl jis puikiai tinka tokioms užduotims kaip tamsaus režimo perjungimų įgyvendinimas. Be to, contains metodas patikrina, ar elemente yra konkreti klasė, kuri gali būti naudinga sąlygiškai taikant stilius ar elgseną, pagrįstą esama elemento būsena.

Dažnai užduodami klausimai apie „JavaScript“ klasės manipuliavimą

  1. Kaip prie elemento pridėti kelias klases?
  2. Naudoti classList.add metodas su keliais argumentais: element.classList.add('class1', 'class2').
  3. Ar galiu pašalinti visas klases iš elemento?
  4. Taip, galite naudoti className ypatybę ir nustatykite ją į tuščią eilutę: element.className = ''.
  5. Koks skirtumas tarp className ir classList?
  6. className nustato arba gauna visos klasės atributą, tuo tarpu classList leidžia detaliau manipuliuoti klasėmis.
  7. Kaip patikrinti, ar elementas turi tam tikrą klasę?
  8. Naudoti classList.contains metodas: element.classList.contains('classname').
  9. Kaip perjungti klasę elemente?
  10. Naudoti classList.toggle metodas: element.classList.toggle('classname').
  11. Ar galiu naudoti „jQuery“ klasėms valdyti?
  12. Taip, „jQuery“ siūlo tokius metodus kaip addClass, removeClass, ir toggleClass.
  13. Kas yra tiesioginis DOMTokenList?
  14. A DOMTokenList yra tiesioginis rinkinys, kuris automatiškai atnaujinamas, kai pasikeičia elemento klasės atributas.
  15. Is classList palaikoma visose naršyklėse?
  16. classList yra palaikoma visose šiuolaikinėse naršyklėse, tačiau senesnės „Internet Explorer“ versijos gali jos visiškai nepalaikyti.
  17. Kaip galiu dinamiškai pridėti klases pagal sąlygas?
  18. Tu gali naudoti if teiginiai kartu su classList.add arba classList.remove taikyti klases sąlyginai.

Pagrindiniai dinaminių klasių pakeitimų metodai

Pateikti scenarijai parodo, kaip pakeisti HTML elemento klasę naudojant JavaScript ir jQuery reaguojant į paspaudimo įvykį. Pirmajame scenarijuje šiai funkcijai pasiekti naudojamas paprastas JavaScript. The getElementById metodas naudojamas mygtuko elementui su ID „myButton“ pasirinkti. The onclick Tada šiam elementui priskiriamas įvykis, nurodant funkciją, kuri turi būti vykdoma spustelėjus mygtuką. Šios funkcijos viduje yra mygtukas className ypatybė nustatoma į „pakeista“, pakeičiant jos klasę, o vėliau ir stilių, kaip apibrėžta CSS. Šis scenarijus efektyviai parodo paprasto JavaScript naudojimo DOM manipuliavimui paprastumą ir tiesiogiškumą.

Antrasis scenarijus iliustruoja tas pačias funkcijas naudojant jQuery – populiarią „JavaScript“ biblioteką, kuri supaprastina HTML dokumentų perėjimą ir manipuliavimą. Čia yra jQuery slapyvardis $ naudojamas mygtuko elementui pasirinkti. The click Tada taikomas metodas paspaudimo įvykio įvykių tvarkyklei nustatyti. Šioje tvarkyklėje mygtuko klasė modifikuojama naudojant jQuery removeClass ir addClass metodus. Šie metodai suteikia patogų būdą manipuliuoti elementų klasėmis ir siūlo skaitomesnį ir glaustesnį metodą, palyginti su paprastu JavaScript. Abiejų scenarijų tikslas – parodyti, kaip skirtingi įrankiai gali pasiekti tą patį tikslą – dinamiškai keisti elemento klasę, remiantis vartotojo sąveika.

Apibendrinant pagrindinius dalykus

Manipuliavimas HTML elemento klase naudojant „JavaScript“ arba „jQuery“ yra paprastas būdas dinamiškai atnaujinti elemento stilių ir elgesį. Suprasdami ir naudodami tokius metodus kaip className, classList, ir „jQuery“ klasės manipuliavimo metodais, kūrėjai gali pagerinti savo tinklalapių interaktyvumą ir reagavimą, kad jie būtų patrauklesni naudotojams.