Como você pode colocar CSS em JavaScript?

““Folha de estilo em cascata (CSS)”É essencial para aplicar o estilo no design geral de documentos e tornar uma página da web atraente e fácil de usar. Mais especificamente, a colocação de CSs em JavaScript é muito útil para realizar as funcionalidades complexas em JavaScript, além de tornar o site geral ou a página da web atraente e acessível.

Este artigo discutirá exemplos de vincular CSS com JavaScript.

Como você pode colocar CSS em JavaScript?

O CSS pode ser colocado em JavaScript, obtendo o elemento da cabeça HTML, criando um novo elemento de link e definindo seus atributos para acessar o arquivo CSS específico.

Confira o exemplo fornecido para entender os conceitos declarados.

Exemplo 1: Criando um link em JavaScript e anexando -o ao título usando CSS

No exemplo seguinte, obtenha o elemento de cabeça HTML usando o “documento.getElementsByTagName ()”Método que incluirá um elemento no DOM (modelo de objeto de documento) dinamicamente:

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

Agora, crie um novo elemento de link usando o “documento.createElement ()”Método:

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

Depois disso, defina os atributos para o elemento de link criado para relacionar o documento atual com o documento vinculado (CSS) especificando o tipo de arquivo e o nome do arquivo da seguinte forma:

linkcss.rel = 'STILELESHEET';
linkcss.type = 'texto/css';
linkcss.href = 'linkcss.CSS ';

O "ApndendChild ()”O método anexará o elemento de link especificado como seu argumento à cabeça HTML:

htmlhead.appendChild (link);

Na etapa abaixo, acesse o elemento criado chamado “link”Usando o atributo de classe:

Coloque CSS em JavaScript

Finalmente, aplique o estilo CSS no cabeçalho adicionado.

Código CSS

.link
cor azul;
Size da fonte: 24px;
Alinhamento de texto: centro;

Saída

Na saída acima, pode -se observar que o estilo CSS é aplicado no cabeçalho especificado acessando o link criado no JavaScript.

Exemplo 2: Criando um link em JavaScript e anexando -o a dividir usando CSS

No exemplo seguinte, repita as etapas discutidas acima para obter o elemento da cabeça HTML, criando um novo elemento de link, atribuindo os atributos para o elemento de link criado e anexando o elemento de link à cabeça HTML:

var linkcss = documento.createElement ('link');
linkcss.rel = 'STILELESHEET';
linkcss.type = 'texto/css';
linkcss.href = 'linkcss2.CSS '; documento.getElementsByTagName ('Head') [0].ApndendChild (linkcss);

Em seguida, inclua um “div”No HTML e acesse o link criado com o seguinte valor a ser exibido no DOM:

Coloque CSS em JavaScript

Por fim, implemente o estilo CSS no Div especificado, referindo -se ao elemento criado ".link”. O estilo inclui o ajuste do tamanho da fonte, o peso da fonte, a cor, a cor de fundo, o preenchimento e o alinhamento de texto:

Código CSS

.link
Size da fonte: 24px;
intensidade da fonte: Negrito;
cor branca;
Background-Color: verde;
preenchimento: 10px;
Alinhamento de texto: centro;

Saída

Nós explicamos o procedimento para colocar CSS em JavaScript.

Conclusão

O CSS pode ser colocado em JavaScript, obtendo a cabeça HTML, criando um novo elemento e definindo os atributos para ele, o que resulta em vincular o arquivo CSS específico e anexá -lo à cabeça HTML para ser aplicada ao cabeçalho ou div. Este blog demonstrou o conceito de colocar CSS em JavaScript com a ajuda de exemplos.