Kaip pakeisti HTML elemento klasę naudojant

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.

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 metodas naudojamas mygtuko elementui su ID „myButton“ pasirinkti. The Tada šiam elementui priskiriamas įvykis, nurodant funkciją, kuri turi būti vykdoma spustelėjus mygtuką. Šios funkcijos viduje yra mygtukas 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 Tada taikomas metodas paspaudimo įvykio įvykių tvarkyklei nustatyti. Šioje tvarkyklėje mygtuko klasė modifikuojama naudojant jQuery 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 nuosavybė, kuri suteikia lankstesnį ir efektyvesnį būdą dirbti su klasėmis. The ypatybė grąžina tiesioginį elemento klasės atributų rinkinį DOMTokenList. Naudojant , galite pridėti, pašalinti, perjungti ir patikrinti klases, nepaveikdami kitų klasių, kurios gali būti taikomos elementui.

Pavyzdžiui, metodas gali būti naudojamas norint pridėti vieną ar daugiau klasių prie elemento, o metodas gali pašalinti vieną ar daugiau nurodytų klasių. The 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.

Kaip prie elemento pridėti kelias klases?
Naudoti metodas su keliais argumentais: .
Ar galiu pašalinti visas klases iš elemento?
Taip, galite naudoti ypatybę ir nustatykite ją į tuščią eilutę: .
Koks skirtumas tarp ir ?
nustato arba gauna visos klasės atributą, tuo tarpu leidžia detaliau manipuliuoti klasėmis.
Kaip patikrinti, ar elementas turi tam tikrą klasę?
Naudoti metodas: .
Kaip perjungti klasę elemente?
Naudoti metodas: .
Ar galiu naudoti „jQuery“ klasėms valdyti?
Taip, „jQuery“ siūlo tokius metodus kaip , , ir .
Kas yra tiesioginis DOMTokenList?
A yra tiesioginis rinkinys, kuris automatiškai atnaujinamas, kai pasikeičia elemento klasės atributas.
Is palaikoma visose naršyklėse?
yra palaikoma visose šiuolaikinėse naršyklėse, tačiau senesnės „Internet Explorer“ versijos gali jos visiškai nepalaikyti.
Kaip galiu dinamiškai pridėti klases pagal sąlygas?
Tu gali naudoti teiginiai kartu su arba taikyti klases sąlyginai.

Pagrindiniai dinaminių klasių pakeitimų metodai

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 , , ir „jQuery“ klasės manipuliavimo metodais, kūrėjai gali pagerinti savo tinklalapių interaktyvumą ir reagavimą, kad jie būtų patrauklesni naudotojams.

Kaip pakeisti HTML elemento klasę naudojant „JavaScript“.

„JavaScript“ klasės manipuliavimo supratimas

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

HTML elemento klasės atnaujinimas naudojant jQuery

Pažangūs manipuliavimo klase metodais JavaScript

Pagrindiniai dinaminių klasių pakeitimų metodai