Come impostare lo stile usando puro javascript

Quando gli sviluppatori devono aggiungere animazione o modificare lo stile di qualsiasi elemento in base alle interazioni dell'utente o ad altri eventi dinamici nella pagina Web, può essere più efficiente utilizzare JavaScript per aggiornare gli stili anziché utilizzare CSS. JavaScript può creare animazioni che sarebbero difficili da ottenere con i soli CSS.

Questo tutorial descriverà il processo di styling della pagina usando JavaScript.

Come impostare lo stile usando puro javascript?

Per modellare una pagina Web utilizzando JavaScript, utilizzare i seguenti approcci:

• Styling in linea
• Styling globale

Metodo 1: imposta lo stile con JavaScript usando lo stile "inline"

Per applicare qualsiasi stile su un singolo elemento, utilizzare i seguenti approcci:

• attributo di stile
• Metodo setAttribute ()

Esempio 1: stile in linea con l'attributo "stile"

Innanzitutto, aggiungi alcuni contenuti sulla pagina:

Stile di me usando lo stile in linea in JavaScript

La pagina web prima dello styling ora sembra come segue:

Ora, modella il testo usando JavaScript. Innanzitutto, ottieni il riferimento del testo in cui vogliamo aggiungere un po 'di stile usando "getElementById ()" metodo:

let text = document.getElementById ("testo");

Cambia il colore del testo usando il “stile"Attributo:

testo.stile.color = "rosso";

Come puoi vedere che il testo è ora in rosso:

Esempio 2: Styling in linea usando il metodo "setAttribute ()"

Qui useremo il "setAttribute ()"Metodo in cui cambieremo il colore e il colore di sfondo del testo e impostare il testo nello stile audace:

testo.setAttribute ("Style", "Colore di sfondo: Grey; Colore: Giallo; Font: Bold;");

Si può osservare che il colore, il colore di sfondo e lo stile del carattere sono stati implementati con successo sul testo:

Metodo 2: imposta lo stile con JavaScript usando lo stile "globale"

Se si desidera aggiungere lo stesso stile sui diversi elementi, usa "Styling globale"Tecnica. Imposta gli stili su più elementi contemporaneamente usando "getElementsByClassName () "," getElementsByTagName (), "o" QuerySelectorAll ()"Metodi.

Esempio

Nel file HTML, aggiungi un po 'di testo nella pagina:

Stile usando javascript

STHYME ME usando lo stile globale in JavaScript

STHYME ME usando lo stile globale in JavaScript

Contenuto del corpo

Produzione

Ora, modella la pagina usando l'approccio di stile globale. Innanzitutto, aggiungi un po 'di stile per il tag usando "QuerySelector ()" metodo. Qui cambieremo il colore di sfondo, la famiglia dei caratteri e il colore del testo e impostare l'imbottitura e il margine del corpo su "0" usando "stile"Attributo:

const body = document.QuerySelector ("corpo");
corpo.stile.backgroundColor = "LightBlue";
corpo.stile.fontfamily = "Arial, sans-serif";
corpo.stile.color = "bianco";
corpo.stile.margin = "0";
corpo.stile.padding = "0";

Come puoi vedere, tutto lo stile indicato è stato implementato con successo sulla pagina web:

Ora cambieremo il colore dell'intestazione e lo sposteremo verso il basso applicando "margintop":

const h4 = documento.QuerySelector ("H4");
H4.stile.color = "nero";
H4.stile.margintop = "50px";

Puoi vedere che l'intestazione si sta muovendo un po 'verso il basso e il colore è cambiato in "nero":

Ora, modifica il colore del testo del testo specificato che contiene il “testo"Classe usando il"QuerySelectorAll ()" metodo:

Let Elements = Document.QuerySelectorall ('.testo');
elementi.foreach (function (Elem)
Elem.stile.color = "blu";
);

Produzione

Si trattava di uno styling usando puro javascript.

Conclusione

Per modellare una pagina Web utilizzando JavaScript, usa "Styling in linea "o" Styling globale"Con l'aiuto del"Attributo Style "," setAttribute ()" metodo, "getElementsByClassName ()","getElementsByTagName () "o" QuerySelectorAll ()"Metodi. Lo stile in linea viene utilizzato per modellare un singolo elemento, mentre più elementi usano l'approccio di stile globale per lo stile. Questo tutorial ha descritto il processo di styling della pagina usando JavaScript.