Hvordan sette stil ved hjelp av ren javascript

Når utviklerne trenger å legge til animasjon eller endre stilen til ethvert element basert på brukerinteraksjoner eller andre dynamiske hendelser på websiden, kan det være mer effektivt å bruke JavaScript for å oppdatere stilene i stedet for å bruke CSS. JavaScript kan lage animasjoner som ville være vanskelig eller umulig å oppnå med CSS alene.

Denne opplæringen vil beskrive prosessen med å style siden ved hjelp av JavaScript.

Hvordan sette stil ved hjelp av ren javascript?

For å style en webside ved hjelp av JavaScript, bruk følgende tilnærminger:

• Inline styling
• Global styling

Metode 1: Sett stil med JavaScript ved bruk av "inline" styling

For å bruke styling på et enkelt element, bruk følgende tilnærminger:

• stil attributt
• setAttribute () -metode

Eksempel 1: Inline styling ved hjelp av "stil" attributt

Først må du legge til litt innhold på siden:

Style Me ved hjelp av inline styling i JavaScript

Nettsiden før styling ser nå ut som følger:

Stil teksten ved hjelp av JavaScript. Først må du få tekstens referanse der vi ønsker å legge til litt styling ved å bruke "getElementById ()”Metode:

La tekst = dokument.getElementById ("tekst");

Endre fargen på teksten ved å bruke “stil" Egenskap:

tekst.stil.farge = "rød";

Som du kan se at teksten nå er i rødt:

Eksempel 2: Inline styling ved bruk av "setAttribute ()" -metode

Her vil vi bruke “setAttribute ()”Metode hvor vi vil endre fargen og bakgrunnsfargen på teksten, og angi teksten i den dristige stilen:

tekst.setAttribute ("stil", "bakgrunnsfarge: grå; farge: gul; font: fet;");

Det kan observeres at fargen, bakgrunnsfargen og fontstilen er implementert på teksten:

Metode 2: Sett stil med JavaScript ved bruk av "global" styling

Hvis du vil legge til den samme stylingen på de forskjellige elementene, bruk "Global styling”Teknikk. Den setter stiler på flere elementer på en gang ved å bruke "getElementsByClassName () ”,“ GetElementsByTagName (), ”eller“ QueryStectorAll ()”Metoder.

Eksempel

I HTML -fil, legg til litt tekst på siden:

Stil ved hjelp av JavaScript

Style Me ved hjelp av global styling i JavaScript

Style Me ved hjelp av global styling i JavaScript

Kroppsinnhold

Produksjon

Stil på siden ved å bruke den globale stylingstilnærmingen. Først, legg til litt styling for taggen ved å bruke "QuerySelector ()”Metode. Her vil vi endre bakgrunnsfarge, fontfamilie og tekstfarge og stille kroppens polstring og margin til '0' ved å bruke “stil" Egenskap:

const body = dokument.QuerySelector ("Body");
kropp.stil.BakgrunnColor = "LightBlue";
kropp.stil.fontfamily = "Arial, sans-serif";
kropp.stil.farge = "hvit";
kropp.stil.margin = "0";
kropp.stil.Padding = "0";

Som du kan se, har all den gitte stylingen blitt implementert på websiden:

Nå vil vi endre fargen på overskriften og flytte den nedover ved å bruke “Margintop”:

const h4 = dokument.QuerySelector ("H4");
H4.stil.farge = "svart";
H4.stil.Margintop = "50px";

Du kan se at overskriften beveger seg litt nedover, og fargen endres til "svart”:

Endre tekstfargen på den spesifiserte teksten som inneholder "tekst”Klasse ved å bruke“QuerySelectorAll ()”Metode:

La elementer = dokument.QuerySelectorAll ('.tekst');
elementer.foreach (funksjon (elem)
Elem.stil.farge = "blå";
);

Produksjon

Det handlet om styling ved hjelp av Pure JavaScript.

Konklusjon

For å style en webside ved hjelp av JavaScript, bruk "Inline styling "eller" global styling”Ved hjelp av“stil ”attributt,“ setAttribute ()”Metode,“getElementsByClassName ()”,“getElementsByTagName () ”eller“ querySelectorAll ()”Metoder. Inline styling brukes til å style et enkelt element, mens flere elementer bruker den globale stylingstilnærmingen for styling. Denne opplæringen beskrev prosessen med å style siden ved hjelp av JavaScript.