Jak zmienić klasę elementu HTML za pomocą JavaScript?

W fazie projektowania strony internetowej lub serwisu internetowego zdarzają się sytuacje, w których ze względu na jakąś aktualizację nie potrzebujesz już dostępu do niektórych elementów. Ponadto, gdy istnieje potrzeba przypisania więcej niż jednej klasy do konkretnego elementu w html. W takich przypadkach zmiana klasy elementu HTML w JavaScript jest bardzo pomocna w takich sytuacjach.

Ten blog zademonstruje podejścia do rozważenia podczas zmiany klasy elementu HTML w JavaScript.

Jak zmienić klasę elementu HTML za pomocą JavaScript?

Aby zmienić klasę elementu HTML za pomocą JavaScript, można zastosować następujące podejścia:

• • “ Nazwa klasy ' własność.
  • “ lista klas ' własność.

Podejście 1: Zmień klasę elementu HTML za pomocą JavaScript za pomocą właściwości className

Takie podejście może wejść w życie poprzez dostęp do utworzonej klasy skojarzonej z elementem i przypisanie mu innej klasy.

Poniższy przykład ilustruje podaną koncepcję.

Przykład

W poniższym kodzie w ramach „ ”, umieść następujący nagłówek w „

” tag. Następnie utwórz określony przycisk, do którego zostanie przypisany domyślny „ klasa ”, który zostanie zmieniony w dalszej części kodu. Przypisz mu także „ ID ” i załączony „ na kliknięcie ” zdarzenie wywołujące funkcję Class().

W dalszej części kodu umieść następujący komunikat w „

”, aby wyświetlić go na DOM po przekształceniu klasy:

Kod HTML:

< ciało styl = 'wyrównanie tekstu: do środka;' >
< h2 > Zmień element Nazwa klasy

Stara nazwa klasy to: klasa domyślna

W kodzie JS zadeklaruj funkcję o nazwie „ Klasa() ”. Tutaj uzyskaj dostęp do domyślnej klasy przez jej id, używając „ document.getElementById() ' metoda. „ Nazwa klasy Właściwość ” przekształci utworzoną klasę w klasę o nazwie „ nowa klasa ”.

Wreszcie „ tekst wewnętrzny Właściwość ” wyświetli następujący komunikat wraz ze zmienioną klasą:

Kod JS:

Wyjście

W powyższym wyniku obserwuj zmianę „ klasa ” po prawej stronie po kliknięciu przycisku w DOM.

Podejście 2: Zmień klasę elementu HTML za pomocą JavaScript za pomocą właściwości classList

To szczególne podejście można zaimplementować w celu usunięcia określonej klasy i przypisania do niej nowej klasy, zmieniając ją w ten sposób.

Przykład

W pierwszej kolejności powtórz opisane powyżej metody włączania nagłówka, tworzenia przycisku z przypisaną klasą, identyfikatorem i dołączonym zdarzeniem onclick wywołującym określoną funkcję. Następnie podobnie dodaj sekcję nagłówka w „

” aby powiadomić użytkownika o zmianie klasy po kliknięciu przycisku:

Kod HTML

< ciało styl = 'wyrównanie tekstu: do środka;' >
< h2 > Zmień klasę elementu ! h2 >
< przycisk klasa = 'Stronie internetowej' na kliknięcie = 'Klasa()' ID = 'zmiana' > Kliknij przycisk >
< h3 ID = 'głowa' styl = 'kolor tła: jasnoszary;' > Stara nazwa klasy to: Strona internetowa h3 >
ciało >

Teraz zadeklaruj funkcję o nazwie „ Klasa() ”. W swojej definicji zastosuj „ lista klas ” wraz z “ usunąć() ” metoda, aby pominąć dostępną klasę o nazwie „ Stronie internetowej ”, który odpowiada utworzonemu przyciskowi.

W następnym kroku przypisz nową klasę do tej samej klasy, korzystając z omawianej właściwości z „ Dodaj() ' metoda. Na koniec wyświetl zmienioną klasę, jak omówiono w poprzednim podejściu:

Kod JS

funkcjonować Klasa ( ) {
document.getElementById ( 'zmiana' ) .classList.usuń ( 'Stronie internetowej' )
document.getElementById ( 'zmiana' ) .classList.add ( „Linuksa” ) ;
var access = document.getElementById ( 'zmiana' ) .ListaKlasów;
document.getElementById ( 'głowa' ) .innerHTML = 'Nowa nazwa klasy to: ' + dostęp;
}

Wyjście

Ten tekst miał na celu wyjaśnienie koncepcji zmiany klasy elementu HTML za pomocą JavaScript.

Wniosek

„ Nazwa klasy ' oraz ' lista klas ” właściwości można wykorzystać do zmiany klasy elementu HTML. Właściwość className doprowadziła do szybszego podejścia do wykonania żądanego wymagania w porównaniu z właściwością classList, ponieważ wymagała mniejszej złożoności kodu. Z kolei właściwość classList zmieniła domyślną klasę za pomocą dwóch dodatkowych metod. Ten artykuł zilustrował podejścia do zmiany klasy elementu HTML za pomocą JavaScript.