Jak dodać CSS za pomocą JavaScript

Istnieją różne scenariusze, w których programiści muszą stylizować stronę za pomocą JavaScript. Na przykład dynamiczna zmiana stylu elementów w interakcjach użytkownika, w tym wyświetlanie różnych animacji lub stylów po zaznaczeniu lub najechaniu kursorem na dowolny tekst i tak dalej. W przypadku stylów dynamicznych użycie stylów CSS w JavaScript jest bardziej wydajne. Zapewnia elastyczny i dynamiczny sposób zarządzania stylami i sprawia, że aplikacje są bardziej przyjazne dla użytkownika.

W tym artykule opisano metody dodawania CSS za pomocą JavaScript.

Jak dodać CSS za pomocą JavaScript?

W języku JavaScript można dodawać style CSS do elementu, modyfikując jego właściwość stylu za pomocą następujących metod lub podejść:

style Właściwość jako styl wbudowany
setAttribute() Metoda jako styl wbudowany
createElement() Metoda jako globalna stylizacja

Metoda 1: Dodaj CSS za pomocą JavaScript przy użyciu właściwości „style”.

Aby dodać CSS w JavaScript, użyj „ styl ' nieruchomość. Służy do uzyskiwania dostępu do wbudowanych stylów elementu i manipulowania nimi. Daje obiekt, który reprezentuje wbudowane style elementu i pozwala uzyskać lub ustawić indywidualne właściwości stylu.

Składnia
Aby dodać styl CSS w JavaScript, używana jest następująca składnia dla „ styl ' nieruchomość:

element. styl ;

Tutaj, ' element ” to odwołanie do elementu HTML.

Przykład
W poniższym przykładzie stylizujemy przyciski za pomocą JavaScript. Najpierw utworzymy trzy przyciski i przypiszemy im identyfikatory, co ułatwi dostęp do elementów przycisków w celu stylizacji:

< identyfikator przycisku = 'btn1' > Zgadzać się przycisk >
< identyfikator przycisku = 'btn2' > Odrzucić przycisk >
< identyfikator przycisku = 'btn3' > Zaakceptować przycisk >

Przed stylizacją dane wyjściowe będą wyglądać następująco:

Teraz stylizujmy te przyciski w JavaScript, używając „ styl ' nieruchomość. Najpierw zdobądź wszystkie elementy przycisku, używając przypisanych im identyfikatorów za pomocą „ getElementById() ' metoda:

niech się zgodzi = dokument. getElementById ( 'btn1' ) ;
niech odrzuci = dokument. getElementById ( 'btn2' ) ;
pozwól zaakceptować = dokument. getElementById ( 'btn3' ) ;

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

zgadzać się. styl . kolor tła = 'zielony' ;
odrzucić. styl . kolor tła = 'czerwony' ;
zaakceptować. styl . kolor tła = 'żółty' ;

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

Metoda 2: Dodaj CSS za pomocą JavaScript przy użyciu metody „setAttribute()”.

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

Składnia
Następująca składnia jest używana dla „ ustawAtrybut() ' metoda:

element. ustaw atrybut ( atrybut , wartość ) ;

Przykład
Tutaj ustawimy różne style przycisków w JavaScript za pomocą „ ustawAtrybut() ' metoda. Ustaw promień obramowania wszystkich przycisków na „ .5 rem ”, a kolor tekstu w Zgadzać się ' I ' Odrzucić ” przyciski do „ biały ”.

zgadzać się. ustaw atrybut ( 'styl' , „kolor tła: zielony; kolor: biały; promień obramowania: .5rem;” ) ;
odrzucić. ustaw atrybut ( 'styl' , „kolor tła: czerwony; kolor: biały; promień obramowania: .5rem;” ) ;
zaakceptować. ustaw atrybut ( 'styl' , „kolor tła: żółty; promień obramowania: .5rem;” ) ;

Wyjście

Metoda 3: Dodaj CSS za pomocą JavaScript przy użyciu metody „createElement()”.

Jeśli chcesz tworzyć klasy lub identyfikatory w stylach JavaScript, tak jak w stylach CSS, użyj „ utwórz element () ' metoda. Służy do dynamicznego tworzenia nowego elementu. Do stylizacji stwórz „ styl ” przy użyciu tej metody. „ createElement('styl') ” w JavaScript służy do dynamicznego tworzenia nowego elementu stylu, którego można użyć do dodania stylów CSS do strony internetowej.

Składnia
Podana składnia jest używana dla „ utwórz element () ' metoda:

dokument. utwórz Element ( Typ elementu ) ;

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

konst styl = dokument. utwórz Element ( 'styl' ) ;

Następnie dołącz element stylu w tagu head, używając poniższej składni:

dokument. głowa . dołączDziecko ( styl ) ;

Tutaj, ' styl ” jest odniesieniem do nowo utworzonego elementu stylu, a „ dokument.głowa ” to element head dokumentu HTML.

Przykład
Najpierw utwórz element stylu, używając „ utwórz element () ' metoda:

był styl = dokument. utwórz Element ( 'styl' ) ;

Teraz utwórz „ btn ”klasa do zastosowania tego samego stylu na wszystkich przyciskach i identyfikatorach” btn1 ”, „ btn2 ' I ' btn3 ” do indywidualnej stylizacji guzików:

styl. wewnętrzny HTML = `
. btn {
czcionka - rozmiar : 1,1 rem ;
wyściółka : 3 piks ;
margines : 2 piks ;
czcionka - rodzina : bez - szeryfowy ;
granica - promień : .5 rem ;
}
#btn1 {
tło - kolor : zielony ;
kolor : biały ;
}
#btn2 {
tło - kolor : czerwony ;
kolor : biały ;
}
#btn3 {
tło - kolor : żółty ;
}
` ;

Teraz dołącz element stylu do nagłówka dokumentu, przekazując jako parametr do „ dołączDziecko() ' metoda:

dokument. głowa . dołączDziecko ( styl ) ;

Wyjście

To wszystko o dodaniu CSS w JavaScript.

Wniosek

Aby dodać CSS za pomocą JavaScript, użyj stylów wbudowanych, w tym „ styl „Własność” i „ ustawAtrybut() ”, czyli globalna stylizacja przy użyciu metody „ utwórz element () ' metoda. Stylizacja globalna jest bardziej wydajna, natomiast metoda inline nie jest zalecana, ponieważ utrudnia utrzymanie stylów aplikacji i może prowadzić do powtarzania kodu. W tym artykule opisano metody dodawania CSS za pomocą JavaScript.

Jak dodać CSS za pomocą JavaScript