Jak dodać nazwę klasy do elementu HTML za pośrednictwem JavaScript?

JavaScript zapewnia kilka podejść do dodania nazwy klasy do elementu HTML, takiego jak ".Metoda add () ” i ".Nazwa klasy" nieruchomość. Nazwę klasy można dodać do elementów za pomocą CSS (arkusz stylów kaskadowych) i JavaScript. Głównym celem dodania nazwy klasy do elementu HTML jest osiągnięcie różnych funkcji w wybranym elemencie za pomocą określonej nazwy klasy.

Do dodania nazwy klasy można użyć podsumowania JavaScript, do dodania nazwy klasy do elementu HTML:

• Co jest ".add () ”w JavaScript?
• W jaki sposób ".Metoda add () ”w JavaScript?
• Co jest ".ClassName ”w JavaScript?
• W jaki sposób ".ClassName ”Praca właściwości w JavaScript?

Więc zacznijmy!

Co jest ".add () ”w JavaScript?

".add () ”to wbudowana metoda właściwości klasy, której można użyć do dodania nazwy klasy do dowolnego konkretnego elementu HTML. Poniższy fragment pozwoli ci zrozumieć, jak korzystać z „.Dodaj metodę w JavaScript:

element.Lista klas.add („class_name”);

W jaki sposób ".Metoda add () ”w JavaScript?

W tej sekcji przedstawi przewodnik krok po kroku, aby zrozumieć, jak dodać nazwę klasy do elementu HTML za pomocą JavaScript.

W tym programie utworzymy trzy pliki „HTML” plik, plik „CSS” i plik „JavaScript”:

Html

Jak dodać nazwę klasy do elementu HTML za pośrednictwem JavaScript?

Kliknij!

kliknięcie „kliknij mnie!„Przycisk doda nazwę klasy do następującego elementu P

Witamy w Linuxhint.com!!

W powyższym fragmencie wykonaliśmy następujące funkcje:

• Wykorzystaliśmy

  tag, aby dodać nagłówek.

• Następnie wykorzystaliśmy tag do utworzenia przycisku i nazwaliśmy go „Kliknij mnie!".
• Wywołał „classNamefun ()”, ilekroć użytkownik kliknął przycisk.
• Następnie stworzyliśmy

  element.

• Na koniec stworzyliśmy akapit za pomocą

  element i przypisał mu identyfikator „Addclass”.

CSS

.styl
Text-Align: Center;
Styl czcionki: Kursywa;
kolor tła: czarny;
kolor biały;

Plik CSS pełnił następujące funkcje:

• Wyrównaj tekst w środku za pomocą właściwości „Aligacja tekstu”.
• Ustaw styl czcionki kursywnej za pomocą właściwości „w stylu czcionki”.
• Ustaw czarny kolor tła za pomocą właściwości „koloru tła”.
• Na koniec ustaw kolor białego tekstu za pomocą właściwości „kolor”.

JavaScript

funkcja classNamefun ()
Niech para = dokument.getElementById („addClass”);
pkt.Lista klas.Dodaj („styl”);

.plik JS lub JavaScript służył poniżej na liście funkcji:

• Utworzył funkcję o nazwie „ClassNamefun ()”.
• Wykorzystał metodę getElementById () do odczytu/edytowania elementu HTML o identyfikatorze „addclass”.
• Wreszcie, wykorzystałem metodę dodawania, aby dodać nazwę do

  element.

Wyjście
Po pomyślnym wykonaniu kodu początkowo otrzymamy następujące dane wyjściowe:

Kliknij „Kliknij mnie!”Przycisk wygeneruje poniżej podane wyjście:

W ten sposób „.Metoda add () ”w JavaScript.

Co jest ".ClassName ”w JavaScript?

„„.ClassName ”to właściwość w JavaScript, która ustawia/zwraca atrybuty klasowe elementu HTML. Można go użyć do dodawania/określenia nazwy klasy do dowolnego znacznika HTML.

Poniższy fragment pokaże podstawową składnię „.ClassName ”właściwość:

element.className = class_name;

Tutaj „klasa_nazwa” reprezentuje nazwę klasy. W przypadku wielu klas możemy określić nazwę klas za pomocą składni oddzielonej przecinka.

W jaki sposób ".ClassName ”Praca właściwości w JavaScript?

Rozważmy poniższy przykład, aby uzyskać podstawowe zrozumienie „.Nazwa klasy ”.

Html

Jak dodać nazwę klasy do elementu HTML za pośrednictwem JavaScript?

Kliknij!

kliknięcie „kliknij mnie!„Przycisk doda nazwę klasy do tego elementu

Klasa HTML wykonała następujące zadania:

• Wykorzystał

  element, aby dodać nagłówek.

• Użyj znacznika do utworzenia przycisku i nazwany go „Kliknij mnie!".
• Wywołał „classNamefun ()”, ilekroć użytkownik kliknął przycisk.
• Wreszcie stworzył

  i przypisał to identyfikator „Addclass”.

CSS

Plik CSS pozostanie taki sam jak w poprzednim przykładzie.

JavaScript

funkcja classNamefun ()
Niech Helement = dokument.getElementById („addClass”);
Helement.className = "style";

W pliku JavaScript wykorzystaliśmy getElementById () metoda odczytu/edytowania elementu HTML o identyfikatorze „.addclass ”. Następnie wykorzystaliśmy metodę dodawania, aby dodać nazwę do

element.

Wyjście
Po uruchomieniu powyższego programu, początkowo program ten wytworzy poniżej podane dane wyjściowe:

Po kliknięciu „Kliknij mnie!„Przycisk, ClassNameFun () zostanie wywołany, w konsekwencji, otrzymamy następujące dane wyjściowe:

Wyjście wyjaśnia, że ​​nazwa klasy została pomyślnie dodana do

element.

Wniosek

W JavaScript „The„.Metoda dodawania () ”i„.właściwość ClassName ”służy do dodania nazwy klasy do dowolnego elementu HTML. Ten zapis wyjaśnił wszystkie podstawy dodawania nazw klas do dowolnego elementu HTML. Ten post wyjaśnił, jak korzystać z „.Metoda dodawania () ”i„.Nazwa klasy ”za pomocą niektórych odpowiednich przykładów.