Come puoi posizionare CSS in JavaScript?

"Foglio di stile a cascata (CSS)"È essenziale per applicare lo stile alla progettazione complessiva dei documenti e rendere una pagina web attraente e facile da usare. Più specificamente, il posizionamento di CSS in JavaScript è molto utile per eseguire le funzionalità complesse in JavaScript, oltre a rendere attraente e accessibile il sito Web o la pagina Web complessivi.

Questo articolo discuterà esempi di collegamento di CSS con JavaScript.

Come puoi posizionare CSS in JavaScript?

I CSS possono essere inseriti in JavaScript ottenendo l'elemento HTML Head, creando un nuovo elemento di collegamento e impostando i suoi attributi per accedere al particolare file CSS.

Dai un'occhiata all'esempio fornito per comprendere i concetti dichiarati.

Esempio 1: creazione di un collegamento in JavaScript e aggiungendolo all'intestazione usando CSS

Nel seguente esempio, ottieni l'elemento head html usando "documento.getElementsByTagName ()"Metodo che includerà un elemento nel DOM (modello di oggetti documentali) in modo dinamico:

var htmlhead = documento.getElementsByTagName ('Head') [0];

Ora, crea un nuovo elemento di collegamento usando "documento.createElement ()" metodo:

var linkcss = documento.createElement ('link');

Successivamente, impostare gli attributi per l'elemento collegamento creato per mettere in relazione il documento corrente con il documento collegato (CSS) specificando il tipo di file e il nome del file come segue:

linkcss.rel = 'foglio di stile';
linkcss.type = 'text/css';
linkcss.href = 'linkcss.CSS ';

IL "appendChild ()"Il metodo aggiungerà l'elemento di collegamento specificato come argomento alla testa HTML:

Htmlhead.appendChild (link);

Nel passaggio seguente, accedi all'elemento creato chiamato "collegamento"Utilizzando l'attributo della classe:

Posizionare CSS in JavaScript

Infine, applica lo stile CSS sull'intestazione aggiunta.

Codice CSS

.collegamento
colore blu;
Font-size: 24px;
Testo-align: centro;

Produzione

Nell'output di cui sopra, si può osservare che lo stile CSS viene applicato sull'intestazione specificata accedendo al collegamento creato in JavaScript.

Esempio 2: creazione di un collegamento in JavaScript e aggiungendolo a Div usando CSS

Nell'esempio seguente, ripetere i passaggi sopra disclusivi per ottenere l'elemento Head HTML, creare un nuovo elemento di collegamento, assegnare gli attributi per l'elemento di collegamento creato e aggiungere l'elemento collegamento alla testa HTML:

var linkcss = documento.createElement ('link');
linkcss.rel = 'foglio di stile';
linkcss.type = 'text/css';
linkcss.href = 'linkcss2.CSS '; documento.getElementsByTagName ('Head') [0].AppendChild (Linkcss);

Successivamente, includi un “div"In HTML e accedi al collegamento creato con il seguente valore da visualizzare sul DOM:

Posizionare CSS in JavaScript

Infine, implementa lo stile CSS sul Div specificato facendo riferimento all'elemento creato ".collegamento". Lo stile include la regolazione del carattere, del carattere, del colore, del colore di sfondo, dell'imbottitura e dell'allineamento del testo:

Codice CSS

.collegamento
Font-size: 24px;
Font-weight: audace;
colore bianco;
Background-color: verde;
imbottitura: 10px;
Testo-align: centro;

Produzione

Abbiamo spiegato la procedura per il posizionamento di CSS in JavaScript.

Conclusione

I CSS possono essere inseriti in JavaScript ottenendo la testa HTML, creando un nuovo elemento e impostando gli attributi per esso, il che si traduce nel collegare il particolare file CSS e l'apprendimento alla testa HTML per essere applicata all'intestazione o Div. Questo blog ha dimostrato il concetto di posizionare CSS in JavaScript con l'aiuto di esempi.