Jak zmienić klasę elementu HTML z JavaScript?
W fazie projektowania strony internetowej lub strony internetowej istnieją pewne sytuacje, w których nie trzeba już uzyskać dostępu do niektórych konkretnych elementów z powodu aktualizacji. Ponadto, gdy istnieje potrzeba przypisania więcej niż jednej klasy do określonego elementu w HTML. W takich przypadkach zmiana klasy elementu HTML w JavaScript ma wielką pomoc w zaspokojeniu takich sytuacji.
Ten blog pokaże podejścia, które należy wziąć pod uwagę podczas zmiany klasy elementu HTML w JavaScript.
Jak zmienić klasę elementu HTML z JavaScript?
Aby zmienić klasę elementu HTML z JavaScript, można zastosować następujące podejścia:
-
- "Nazwa klasy" nieruchomość.
- "Lista klas" nieruchomość.
Podejście 1: Zmień klasę elementu HTML z JavaScript za pomocą właściwości ClassName
Takie podejście może wejść w życie, uzyskując dostęp do utworzonej klasy powiązanej z elementem i przypisując inną klasę.
Poniższy przykład pokazuje podaną koncepcję.
Przykład
W poniższym kodzie w ramach „”Tag, zawiera następujące nagłówek w„”Tag. Następnie utwórz określony przycisk, który zostanie przypisany domyślnie „klasa”, Które zostanie zmienione w dalszej części kodu. Przypisz go także „ID”I załączony„na kliknięcie„Wydarzenie wywołujące klasę funkcji ().
Później w kodzie dołącz następującą wiadomość w „ Kod HTML: Zmień nazwę klasy elementu Stara nazwa klasy to: Klasa domyślna Wreszcie „„Innertext„Właściwość wyświetli następującą wiadomość wraz ze zmienioną klasą: Kod JS: Podejście 2: Zmień klasę elementu HTML za pomocą JavaScript za pomocą właściwości LLIST Class To konkretne podejście można wdrożyć w celu usunięcia określonej klasy i przypisania do niej nowej klasy, zmieniając ją. Przykład Najpierw powtórz powyższe omawiane metody włączenia nagłówka, tworzenia przycisku z przypisaną klasą, identyfikatorem i załączonym zdarzeniem OnClick wywołując określoną funkcję. Następnie podobnie dodaj sekcję nagłówka w „ Kod HTML Zmień klasę elementu! W następnym kroku przypisz nową klasę do tej samej klasy, korzystając z omawianej właściwości z „dodać()" metoda. Na koniec wyświetl zmienioną klasę, jak omówiono w poprzednim podejściu: Kod JS Wniosek „„Nazwa klasy" I "Lista klas„Właściwości można wykorzystać do zmiany klasy elementu HTML. Właściwość ClassName doprowadziła do szybszego podejścia w wykonywaniu pożądanego wymogu w porównaniu z właściwością listy klasy, ponieważ wiązała się z mniejszą złożonością kodu. Z drugiej strony właściwość klasy klasy zmieniła klasę domyślną za pomocą dodatkowych dwóch metod. W tym artykule zilustrowano podejścia do zmiany klasy elementu HTML z JavaScript.
Kliknij
W kodzie JS zadeklaruj funkcję o nazwie „Klasa()". Tutaj uzyskaj dostęp do klasy domyślnej według jej identyfikatora za pomocą „dokument.getElementById ()" metoda. „„Nazwa klasy„Własność przekształci utworzoną klasę w klasę o nazwie„NewClass".funkcja klasa ()
dokument.getElementById („MyButton”).className = "newClass";
var Access = Dokument.getElementById („MyButton”).Nazwa klasy;
dokument.getElementById („głowa”).innerHtml = "Nowa nazwa klasy to:" + Access;
Wyjście
W powyższym wyjściu obserwuj zmianę „klasa”Po kliknięciu przycisku w DOM.Nazwa starej klasy to: strona internetowa
Teraz zadeklaruj funkcję o nazwie „Klasa()". W swojej definicji zastosuj „Lista klas„Własność wraz z„usunąć()„Metoda pominięcia dostępnej klasy o nazwie„Strona internetowa”, Który odpowiada utworzonemu przyciskowi.funkcja klasa ()
dokument.getElementById („zmiana”).Lista klas.Usuń („Witryna”)
dokument.getElementById („zmiana”).Lista klas.add („Linuxhint”);
var Access = Dokument.getElementById („zmiana”).Lista klasy;
dokument.getElementById („głowa”).innerHtml = "Nowa nazwa klasy to:" + Access;
Wyjście
Ten zapis miał na celu wyczyszczenie koncepcji zmiany klasy HTML za pomocą JavaScript.