Jak usunąć nazwę klasy z elementu za pośrednictwem JavaScript

Jak wiemy o tym, że JavaScript jest powszechnie używany do manipulowania elementami strony HTML za pomocą interfejsu DOM Węzło. Te manipulacje mogą nie tylko zmienić styl lub dane w elementach HTML, ale mogą nawet zmienić atrybuty elementów, takich jak nazwy klas. Zmiana lub usunięcie nazwy klasy z elementu jest kluczowym zadaniem, szczególnie gdy pracujesz z animacją stylizacji elementów.

Aby przenieść animację z jednego elementu na inny element, nie przepisujesz całego skryptu animacji innych elementów, ponieważ może to zwiększyć obciążenie na serwerze, a raczej piszesz skrypt animacji na nazwach klas lub identy Usuń nazwę klasy lub identyfikator elementu HTML strony internetowej.

Aby usunąć nazwę klasy z elementu, którego używamy .Lista klas.usunąć() funkcjonować.

Składnia to:

element.Lista klas.usuń (nazwa klasy)

Dowiemy się, w jaki sposób możemy użyć JavaScript, aby usunąć nazwę klasy z elementu na stronie internetowej. W tym celu stworzymy:

• Podstawowa strona HTML z elementem o nazwie klasy, którą chcemy usunąć.
• Przycisk, który wywoła funkcję.
• Funkcja połączona z przyciskiem faktycznie usunie nazwę klasy.
• Narzędzia programistów przeglądarki do weryfikacji usunięcia nazwy klasy.

Zacznijmy.

Konfigurowanie strony HTML

Stworzymy element z listą różnych nazw klas. Ten będzie miał również konkretny identyfikator, aby utworzyć odniesienie do tego Kiedy używamy JavaScript. Możemy to stworzyć za pomocą następujących wierszy:

To jest div z wieloma klasami

Mamy div z klasami „Google Yahoo Bing Linuxhint”, a identyfikatorem jest „LH-TUTS. Dodaliśmy właściwość stylu, aby była widoczna. Uruchamiamy plik HTML, aby uzyskać następujące dane wyjściowe:

Teraz, gdy mamy podstawową stronę HTML, utwórzmy przycisk, który usunie klasę z element.

Robimy to za pomocą następujących wierszy kodu:

Usuń klasę

Nasza strona będzie wyglądać tak:

Tworzenie kodu JavaScript w celu usunięcia klasy z elementu

Teraz musimy napisać funkcję „removeClass ()” w skrypcie. Utwórzmy zatem tag i napiszmy funkcję, która usunie klasę „Google” z listy klas za pomocą następujących wierszy:

Ta funkcja powinna usunąć klasę „Google” z listy klas element. Wypróbujmy i zweryfikuj wyjście za pomocą narzędzi programistycznych przeglądarki.

Jak widać, na początku div ma 4 różne klasy. Ale gdy tylko naciśniemy przycisk, nazwa klasy „Google” zostaje usunięta z listy nazw klas.

Możemy nawet usunąć wiele klas jednocześnie, ponieważ używamy linii:

div.Lista klas.Usuń („Google”, „Yahoo”, „Bing”);

Snippet funkcyjny stałby się:

Teraz, jeśli zbadamy dane wyjściowe za pomocą narzędzi programistów przeglądarki, otrzymujemy:

Jak widać, mogliśmy jednocześnie usunąć wiele klas.

Alternatywne podejście

Jest jeszcze jedna rzecz, używaliśmy dokument.getElementById () Aby utworzyć odniesienie do elementu, możemy nawet użyć dokument.getElementByClassName (), Ale w tym celu będziemy musieli zmienić nasz skrypt. Ponieważ nie możemy odnosić się do elementu za pomocą jego nazwy klasy, a następnie usunąć nazwę klasy, zachowując odniesienie do elementu. To dlatego, że nazwa klasy jest „Nodelista na żywo".

Używać dokument.getElementsByClassName () Nasza funkcja staje się:

Funkcja resusyClass ()
div = dokument.getEntsByClassName („Google Yahoo Bing Linuxhint”);
While (div.długość)
div [0].Lista klas.usuń („yahoo”, „bing”);

Ponieważ jest to Nodelista na żywo, bierzemy pierwszy element na liście i usuwamy jego nazwę klasy. Powtarzamy to, aż Nodelist będzie pusty.

Wyjście jest jak:

To jest do usuwania nazwy klasy z elementu za pomocą JavaScript.

Wniosek

JavaScript można użyć do usunięcia nazwy klasy z elementu HTML na stronie internetowej za pomocą .Lista klas.usunąć(). Można go nawet użyć do usunięcia wielu klas z listy klas elementu. Aby to zaprezentować, stworzyliśmy podstawowy HTML z div element na nim. Następnie zakodowaliśmy skrypt, aby usunąć klasę z tego elementu. Zbadaliśmy dane wyjściowe za pomocą narzędzi programistów przeglądarki, a nawet wypróbowaliśmy alternatywny sposób wykonywania tego samego zadania.