Hoe de klasse van een HTML-element wijzigen met JavaScript?

In de fase van het ontwerpen van een webpagina of een website zijn er bepaalde situaties waarin u door een update geen toegang meer hoeft te krijgen tot bepaalde elementen. Bovendien, wanneer het nodig is om meer dan één klasse toe te wijzen aan een specifiek element in html. In dergelijke scenario's is het wijzigen van de klasse van een HTML-element in JavaScript een grote hulp om in dergelijke situaties te voorzien.

Deze blog demonstreert de benaderingen die moeten worden overwogen bij het wijzigen van de klasse van een HTML-element in JavaScript.

Hoe de klasse van een HTML-element wijzigen met JavaScript?

Om de klasse van een HTML-element met JavaScript te wijzigen, kunnen de volgende benaderingen worden toegepast:

• • “ naam van de klasse ' eigendom.
  • “ klasseLijst ' eigendom.

Benadering 1: verander de klasse van een HTML-element met JavaScript met behulp van de className-eigenschap

Deze benadering kan van kracht worden door toegang te krijgen tot de gemaakte klasse die aan een element is gekoppeld en deze een andere klasse toe te wijzen.

Het volgende voorbeeld demonstreert het genoemde concept.

Voorbeeld

In de onderstaande code binnen de ' ” tag, de volgende kop opnemen in de “

' label. Maak daarna de gespecificeerde knop waaraan een standaard ' klas ” die later in de code wordt gewijzigd. Wijs het ook een ' ID kaart ” en een bijgevoegde “ bij klikken ” gebeurtenis die de functie Class() aanroept.

Neem later in de code het volgende bericht op in de '

”-tag om het op de DOM weer te geven bij de transformatie van klasse:

HTML code:

< lichaam stijl = 'tekst-uitlijnen: midden;' >
< h2 > Element wijzigen 's klasnaam

Oude klassenaam is: standaardklasse

Declareer in de JS-code een functie met de naam ' Klas() ”. Hier krijg je toegang tot de standaardklasse via zijn id met behulp van de ' document.getElementById() ” methode. De ' naam van de klasse ” eigenschap transformeert de gemaakte klasse naar de klasse met de naam “ nieuwe klasse ”.

Eindelijk, de ' innerText ” eigenschap zal het volgende bericht samen met de gewijzigde klasse weergeven:

JS-code:

Uitgang:

Let in de bovenstaande uitvoer op de verandering van de ' klas ” aan de rechterkant door op de knop in DOM te klikken.

Benadering 2: verander de klasse van een HTML-element met JavaScript met behulp van de classList-eigenschap

Deze specifieke benadering kan worden geïmplementeerd om de opgegeven klasse te verwijderen en er een nieuwe klasse aan toe te wijzen, waardoor deze wordt gewijzigd.

Voorbeeld

Herhaal eerst de hierboven besproken methoden voor het opnemen van een kop, het maken van een knop met de toegewezen klasse, id en bijgevoegde onclick-gebeurtenis die de gespecificeerde functie oproept. Voeg vervolgens op dezelfde manier de kopsectie toe in de '

” tag om de gebruiker op de hoogte te stellen van de gewijzigde klasse door op de knop te klikken:

HTML code

< lichaam stijl = 'tekst-uitlijnen: midden;' >
< h2 > Klasse van element wijzigen ! h2 >
< knop klas = 'Website' bij klikken = 'Klas()' ID kaart = 'Wijzigen' > Klik hier knop >
< h3 ID kaart = 'hoofd' stijl = 'achtergrondkleur: lichtgrijs;' > Oude klassenaam is: Website h3 >
lichaam >

Declareer nu een functie met de naam ' Klas() ”. Pas in zijn definitie de ' klasseLijst ” eigendom samen met de “ verwijderen() ” methode om de benaderde klasse met de naam “ weg te laten Website ” wat overeenkomt met de gemaakte knop.

Wijs in de volgende stap een nieuwe klas toe aan dezelfde klas met behulp van de besproken eigenschap met de ' toevoegen() ” methode. Geef ten slotte de gewijzigde klasse weer zoals besproken in de vorige benadering:

JS-code

functie Klas ( ) {
document.getElementById ( 'Wijzigen' ) .classList.verwijderen ( 'Website' )
document.getElementById ( 'Wijzigen' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'Wijzigen' ) .classLijst;
document.getElementById ( 'hoofd' ) .innerHTML = 'Nieuwe klasnaam is: ' + toegang;
}

Uitgang:

Dit artikel was bedoeld om het concept van het wijzigen van de klasse van het HTML-element met JavaScript te wissen.

Conclusie

De ' naam van de klasse ' en ' klasseLijst ” eigenschappen kunnen worden gebruikt om de klasse van een HTML-element te wijzigen. De eigenschap className leidde tot een snellere aanpak bij het uitvoeren van de gewenste vereiste in vergelijking met de eigenschap classList, omdat er minder codecomplexiteit nodig was. De eigenschap classList daarentegen heeft de standaardklasse gewijzigd met behulp van twee extra methoden. Dit artikel illustreerde de benaderingen om de klasse van het HTML-element te wijzigen met JavaScript.