Atrybutu class można używać w CSS do wykonywania niektórych zadań dla elementów o odpowiedniej nazwie klasy. W tym artykule omawiamy, jak dodać klasę do elementu za pomocą JavaScript. W JavaScript istnieją pewne sposoby dodania klasy do elementu. Możemy skorzystać z .Nazwa klasy nieruchomość lub .dodać() metoda dodania nazwy klasy do konkretnego elementu.
Omówmy teraz sposoby dodawania klasy do elementu.
Korzystanie z właściwości .className
The .Nazwa klasy Właściwość ustawia nazwę klasy elementu. Tej właściwości można użyć do zwrócenia wartości atrybutu class elementu. Możemy użyć tej właściwości, aby dodać klasę do elementu HTML bez zastępowania istniejącej klasy.
Aby dodać wiele klas, musimy oddzielić ich nazwę spacją, np „klasa 1, klasa 2” .
Jeśli dla elementu zadeklarowano już klasę i musimy dodać nową nazwę klasy do tego samego elementu, należy ją zadeklarować wstawiając spację przed zapisaniem nowej nazwy klasy, w przeciwnym razie nadpisze ona istniejącą nazwę klasy. Można to zapisać w następujący sposób:
document.getElementById('div1').className = ' newClass';
W powyższym kodzie wstawiliśmy spację wcześniej nowaKlasa .
Składnia
Poniżej podano powszechnie używaną składnię tej właściwości do ustawiania lub zwracania nazwy klasy.
Aby ustawić nazwę klasy
element.className = class
Aby zwrócić nazwę klasy
element.className
Przykład użycia .Nazwa klasy właściwość jest podana w następujący sposób.
Przykład - Dodanie nazwy klasy
W tym przykładzie używamy .Nazwa klasy właściwość dodawania 'Do' class do elementu akapitu mającego identyfikator „p1” . Stosujemy CSS do odpowiedniego akapitu, używając nazwy klasy 'Do' .
Musimy kliknąć podane Przycisk HTML „Dodaj klasę” żeby zobaczyć efekt.
add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById('p1'); a.classList.add('para'); } Przetestuj teraz Wyjście
Po kliknięciu danego przycisku wyjściem będzie -
