Hur man ändrar ett HTML-elements klass med JavaScript

Mia Chevalier

Torsdag 27 juni 2024 15:10:13

Uppdatera klasser med JavaScript
JavaScript tillhandahåller kraftfulla verktyg för att dynamiskt interagera med och manipulera HTML-element. En vanlig uppgift är att ändra klassen för ett HTML-element som svar på händelser som onclick.
Den här guiden kommer att visa hur du använder JavaScript för att ändra ett elements klass, vilket möjliggör dynamiska stil- och beteendeförändringar på dina webbsidor. Oavsett om du svarar på ett knapptryck eller en annan händelse, kommer dessa tekniker att förbättra dina webbutvecklingsfärdigheter.

Kommando Beskrivning

className Ställer in eller returnerar klassattributet för ett element. Används för att ändra elementets klass.

getElementById Returnerar elementet som har ID-attributet med det angivna värdet. Används för att välja knappelement.

onclick Ställer in funktionen som ska köras när en klickhändelse inträffar på elementet.

removeClass Tar bort ett eller flera klassnamn från de valda elementen i jQuery.

addClass Lägger till ett eller flera klassnamn till de valda elementen i jQuery.

$ Alias för jQuery, används för att välja element och utföra åtgärder på dem.

Kommando	Beskrivning
className	Ställer in eller returnerar klassattributet för ett element. Används för att ändra elementets klass.
getElementById	Returnerar elementet som har ID-attributet med det angivna värdet. Används för att välja knappelement.
onclick	Ställer in funktionen som ska köras när en klickhändelse inträffar på elementet.
removeClass	Tar bort ett eller flera klassnamn från de valda elementen i jQuery.
addClass	Lägger till ett eller flera klassnamn till de valda elementen i jQuery.
$	Alias för jQuery, används för att välja element och utföra åtgärder på dem.

Förstå JavaScript Class Manipulation

Skripten som tillhandahålls visar hur man ändrar klassen för ett HTML-element med JavaScript och jQuery som svar på en klickhändelse. I det första skriptet används vanlig JavaScript för att uppnå denna funktionalitet. De metoden används för att välja knappelementet med ID 'myButton'. De händelsen tilldelas sedan detta element och anger vilken funktion som ska utföras när knappen klickas. Inuti denna funktion, knappens egenskapen är inställd på 'ändrad', vilket ändrar dess klass och därefter dess stil enligt definitionen i CSS. Det här skriptet visar effektivt upp enkelheten och direktheten i att använda vanlig JavaScript för DOM-manipulation.

Det andra skriptet illustrerar samma funktionalitet med jQuery, ett populärt JavaScript-bibliotek som förenklar genomgång och manipulering av HTML-dokument. Här, jQuery-aliaset används för att välja knappelementet. De metod används sedan för att ställa in en händelsehanterare för klickhändelsen. Inom denna hanterare ändras knappens klass med jQuerys och addClass metoder. Dessa metoder ger ett bekvämt sätt att manipulera elementets klasser, och erbjuder ett mer läsbart och kortfattat tillvägagångssätt jämfört med vanlig JavaScript. Båda skripten syftar till att visa hur olika verktyg kan uppnå samma mål att dynamiskt förändra ett elements klass baserat på användarinteraktion.

Ändra ett elements klass vid klick med hjälp av JavaScript

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

Uppdatera ett HTML-elements klass med jQuery

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

Avancerade tekniker för klassmanipulation i JavaScript

Utöver grundläggande klassändringar som svar på händelser, erbjuder JavaScript mer avancerade tekniker för att manipulera ett elements klasslista. En sådan metod är egendom, vilket ger ett mer flexibelt och kraftfullt sätt att arbeta med klasser. De egenskapen returnerar en levande DOMTokenList-samling av elementets klassattribut. Använder sig av , kan du lägga till, ta bort, växla och söka efter klasser utan att påverka andra klasser som kan tillämpas på elementet.

Till exempel metod kan användas för att lägga till en eller flera klasser till ett element, medan metod kan ta bort en eller flera specificerade klasser. De Metoden är särskilt användbar eftersom den lägger till klassen om den inte finns och tar bort den om den gör det, vilket gör den idealisk för uppgifter som att implementera växlar mellan mörkt läge. Dessutom har contains metod kontrollerar om elementet innehåller en specifik klass, vilket kan vara användbart för att villkorligt tillämpa stilar eller beteenden baserat på det aktuella tillståndet för ett element.

Hur lägger jag till flera klasser till ett element?
Använd metod med flera argument: .
Kan jag ta bort alla klasser från ett element?
Ja, du kan använda egenskap och ställ in den till en tom sträng: .
Vad är skillnaden mellan och ?
ställer in eller hämtar hela klassattributet, medan möjliggör mer detaljerad manipulation av klasser.
Hur kontrollerar jag om ett element har en specifik klass?
Använd metod: .
Hur växlar jag en klass på ett element?
Använd metod: .
Kan jag använda jQuery för att manipulera klasser?
Ja, jQuery tillhandahåller metoder som , , och .
Vad är en live DOMTokenList?
A är en livesamling som automatiskt uppdateras när elementets klassattribut ändras.
Är stöds i alla webbläsare?
stöds i alla moderna webbläsare, men äldre versioner av Internet Explorer kanske inte stöder det fullt ut.
Hur kan jag dynamiskt lägga till klasser baserat på villkor?
Du kan använda uttalanden i kombination med eller att tillämpa klasser villkorligt.

Nyckeltekniker för dynamiska klassförändringar

Skripten som tillhandahålls visar hur man ändrar klassen för ett HTML-element med JavaScript och jQuery som svar på en klickhändelse. I det första skriptet används vanlig JavaScript för att uppnå denna funktionalitet. De metoden används för att välja knappelementet med ID 'myButton'. De händelsen tilldelas sedan detta element och anger vilken funktion som ska utföras när knappen klickas. Inuti denna funktion, knappens egenskapen är inställd på 'ändrad', vilket ändrar dess klass och därefter dess stil enligt definitionen i CSS. Detta skript visar effektivt upp enkelheten och direktheten i att använda vanlig JavaScript för DOM-manipulation.

Att manipulera klassen för ett HTML-element med JavaScript eller jQuery ger ett enkelt sätt att uppdatera ett elements stil och beteende dynamiskt. Genom att förstå och använda metoder som , , och jQuerys klassmanipulationsmetoder, kan utvecklare förbättra interaktiviteten och lyhördheten på sina webbsidor, vilket gör dem mer engagerande för användarna.