Jak dodać CSS do JavaScript

Istnieją różne scenariusze, gdy programiści muszą stylizować stronę za pomocą JavaScript. Na przykład dynamicznie zmienia styl elementów interakcji użytkownika, w tym wyświetlanie różnych animacji lub stylów na skupienie się lub unoszenie się na dowolnym tekście i tak dalej. Do dynamicznej stylizacji zastosowanie stylizacji CSS w JavaScript jest bardziej wydajne. Zapewnia elastyczny i dynamiczny sposób zarządzania stylami i uczynienie aplikacji bardziej przyjaznymi dla użytkownika.

W tym artykule opisano metody dodawania CSS z JavaScript.

Jak dodać CSS do JavaScript?

W JavaScript możesz dodać style CSS do elementu, modyfikując jego właściwość stylu przy użyciu następujących metod lub podejść:

• nieruchomość stylowa jako styl inline
• metoda setAttribute () jako styl inline
• Metoda CreateElement () jako globalna stylizacja

Metoda 1: Dodaj CSS z JavaScript przy użyciu właściwości „stylu”

Do dodawania CSS do JavaScript użyj „styl" nieruchomość. Jest wykorzystywany do dostępu i manipulowania stylami inline elementu. Daje obiekt reprezentujący style wbudowane elementu i pozwala uzyskać lub ustawić właściwości indywidualnych stylów.

Składnia
Do dodawania stylu CSS do JavaScript, do „dla„styl" nieruchomość:

element.styl;

Tutaj, "element”Jest odniesieniem do elementu HTML.

Przykład
W poniższym przykładzie stylizujemy przyciski za pomocą JavaScript. Po pierwsze, utworzymy trzy przyciski i przypisamy je identyfikatory, które pomagają uzyskać dostęp do elementów przycisków do stylizacji:

Zgadzać się
Odrzucić
Zaakceptować

Przed stylizacją wyjście będzie wyglądać tak:

Teraz stylizujmy te przyciski w JavaScript za pomocą „styl" nieruchomość. Najpierw uzyskaj wszystkie elementy przycisków za pomocą przypisanych identyfikatorów za pomocą „getElementById ()" metoda:

Niech się zgadzam = dokument.getElementById („BTN1”);
Pozwól odrzucić = dokument.getElementById („BTN2”);
Akceptuj = dokument.getElementById („BTN3”);

Ustaw kolory tła wszystkich tych przycisków za pomocą „styl" nieruchomość:

zgadzać się.styl.tło Color = „zielony”;
odrzucić.styl.tło color = „czerwony”;
zaakceptować.styl.tło Color = „żółty”;

Jak widać, przyciski zostały pomyślnie zaprojektowane za pomocą „styl" nieruchomość:

Metoda 2: Dodaj CSS z JavaScript za pomocą metody „setAttribute ()”

Aby dodać styl CSS w JavaScript, użyj „setAttribute ()" metoda. Służy do ustawiania lub dodawania atrybutu i jego wartości do elementu HTML.

Składnia
Dla „dla„setAttribute ()" metoda:

element.setAttribute (atrybut, wartość);

Przykład
Tutaj ustawymy różne style przycisków w JavaScript za pomocą „setAttribute ()" metoda. Ustaw promień graniczny wszystkich przycisków, aby „.5rem”Oraz kolor tekstu„Zgadzać się" I "Odrzucić„Przyciski do„biały".

zgadzać się.setAttribute („styl”, „kolor tła: zielony; kolor: biały; border-radus: .5rem; ”);
odrzucić.setAttribute („styl”, „kolor tła: czerwony; kolor: biały; border-radus: .5rem; ”);
zaakceptować.setAttribute („styl”, „kolor tła: żółty; border-radius: .5rem; ”);

Wyjście

Metoda 3: Dodaj CSS z JavaScript za pomocą metody „CreateElement ()”

Jeśli chcesz tworzyć zajęcia lub identyfikatory w stylizacji JavaScript jak w stylizacji CSS, użyj „createElement ()" metoda. Jest wykorzystywany do dynamicznego tworzenia nowego elementu. Dla stylizacji stwórz „styl”Element przy użyciu tej metody. „„CreateElement („styl”)„Metoda w JavaScript służy do dynamicznego tworzenia nowego stylu, którego można użyć do dodawania stylów CSS do strony internetowej.

Składnia
Podana składnia jest używana dla „createElement ()" metoda:

dokument.createElement (ElementType);

Aby dodać styl CSS w JavaScript, użyj podanej składni:

const style = dokument.createElement („styl”);

Następnie dołącz element stylu w znaczniku głównym za pomocą poniższej składni:

dokument.głowa.appendchild (styl);

Tutaj, "styl”Jest odniesieniem do nowo utworzonego elementu stylu i„dokument.głowa”Jest głównym elementem dokumentu HTML.

Przykład
Najpierw utwórz element stylu za pomocą „createElement ()" metoda:

var style = dokument.createElement („styl”);

Teraz stwórz „Btn„Klasa do zastosowania tego samego stylizacji na wszystkich przyciskach i identyfikatorach”BTN1”,„BTN2" I "BTN3„W przypadku indywidualnego stylizacji guzików:

styl.innerHtml = '
.btn
Rozmiar czcionki: 1.1rem;
Wyściółka: 3px;
Margines: 2px;
Font-Family: Sans-Serif;
Radiusz graniczny: .5rem;

#BTN1
kolor tła: zielony;
kolor biały;

#btn2
kolor tła: czerwony;
kolor biały;

#btn3
kolor tła: żółty;

';;

Teraz dołącz element stylu do głowy dokumentu, przekazując parametr do „appendChild ()" metoda:

dokument.głowa.appendchild (styl);

Wyjście

Chodzi o dodanie CSS do JavaScript.

Wniosek

Do dodawania CSS z JavaScript, skorzystaj z stylizacji inline, w tym „styl„Nieruchomość i„setAttribute ()„Metoda lub globalna stylizacja przy użyciu„createElement ()" metoda. Globalna stylizacja jest bardziej wydajna, podczas gdy metoda inline nie jest zalecana, ponieważ utrudnia utrzymanie stylów aplikacji i może prowadzić do powtórzenia kodu. W tym artykule opisano metody dodawania CSS z JavaScript.