Jak ustawić styl za pomocą czystego JavaScript

Gdy programiści muszą dodać animację lub zmienić styl dowolnego elementu na podstawie interakcji użytkownika lub innych dynamicznych zdarzeń na stronie internetowej, używanie JavaScript może być bardziej wydajne. JavaScript może tworzyć animacje, które byłyby trudne lub niemożliwe do osiągnięcia samego CSS.

Ten samouczek opisuje proces stylizacji strony za pomocą JavaScript.

Jak ustawić styl za pomocą czystego JavaScript?

Aby stylizować stronę internetową za pomocą JavaScript, użyj następujących podejść:

• Stylizacja wbudowana
• Globalny stylizacja

Metoda 1: Ustaw styl z JavaScript za pomocą stylizacji „Inline”

Aby zastosować dowolny styl na jednym elemencie, zastosuj następujące podejścia:

• atrybut stylu
• metoda setAttribute ()

Przykład 1: Stylizacja Inline przy użyciu atrybutu „Style”

Najpierw dodaj trochę treści na stronie:

Styl mnie za pomocą stylizacji inline w JavaScript

Strona internetowa przed stylingiem wygląda teraz w następujący sposób:

Teraz stygnij tekst za pomocą JavaScript. Najpierw uzyskaj odniesienie tekstu, w którym chcemy dodać stylizację za pomocą „getElementById ()" metoda:

Niech tekst = dokument.getElementById („tekst”);

Zmień kolor tekstu za pomocą „styl" atrybut:

tekst.styl.color = „czerwony”;

Jak widać, że tekst jest teraz na czerwono:

Przykład 2: Styl inline przy użyciu metody „setAttribute ()”

Tutaj użyjemy „setAttribute ()„Metoda, w której zmienimy kolor i kolor tła tekstu i ustawym tekst w odważnym stylu:

tekst.setAttribute („styl”, „kolor tła: szary; kolor: żółta; czcionka: pogrubienie;”);

Można zauważyć, że kolor, kolor tła i styl czcionki zostały pomyślnie zaimplementowane w tekście:

Metoda 2: Ustaw styl z JavaScript za pomocą stylizacji „globalnej”

Jeśli chcesz dodać ten sam styl na różnych elementach, użyj „Globalny stylizacja”Technika. Ustawia style na wielu elementach jednocześnie za pomocą „getElementsByClassName () ”,„ getElementsByTagname () ”lub„ querySelelectionall ()”Metody.

Przykład

W pliku HTML dodaj tekst na stronie:

Styl za pomocą JavaScript

Styl mnie za pomocą globalnej stylizacji w JavaScript

Styl mnie za pomocą globalnej stylizacji w JavaScript

Zawartość ciała

Wyjście

Teraz stygnij stronę za pomocą globalnego podejścia do stylizacji. Najpierw dodaj stylistykę dla tagu za pomocą „QuerySelelect ()" metoda. Tutaj zmienimy kolor tła, rodzinę czcionek i tekst i ustawym wyściółkę i margines ciała na „0” za pomocą „styl" atrybut:

Const Body = Dokument.querySelelector („ciało”);
ciało.styl.tło color = "lightblue";
ciało.styl.fontfamily = "Arial, sans-serif";
ciało.styl.color = „biały”;
ciało.styl.margin = "0";
ciało.styl.padding = "0";

Jak widać, cała dana stylizacja została pomyślnie zaimplementowana na stronie internetowej:

Teraz zmienimy kolor nagłówka i przeniesiemy go w dół, stosując „Margintop”:

const h4 = dokument.QuerySelelect („H4”);
H4.styl.color = „czarny”;
H4.styl.margintop = "50px";

Widać, że nagłówek porusza się nieco w dół, a kolor jest zmienia się na „czarny”:

Teraz zmień kolor tekstu określonego tekstu zawierającego „tekst„Klasa za pomocą„QuerySelelection ()" metoda:

Niech elementy = dokument.querySelelectionall ('.tekst');
elementy.foreach (funkcja (elem)
Elem.styl.color = „niebieski”;
);

Wyjście

Chodziło o stylowanie za pomocą czystego JavaScript.

Wniosek

Aby stylizować stronę internetową za pomocą JavaScript, użyj „Stylizacja inline ”lub„ globalna stylizacja”Z pomocą„Style ”atrybut„ setAttribute ()" metoda, "getElementsByClassName ()”,„getElementsBaTagname () ”lub„ querySelectorall ()”Metody. Stylizacja inline służy do stylizacji jednego elementu, a wiele elementów używa globalnego podejścia do stylizacji do stylizacji. Ten samouczek opisał proces stylizacji strony za pomocą JavaScript.