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';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:
Finalmente, aplique o estilo CSS no cabeçalho adicionado.
Código CSS
.linkSaí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');Em seguida, inclua um “div”No HTML e acesse o link criado com o seguinte valor a ser exibido no DOM:
Coloque CSS em JavaScriptPor 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
.linkSaí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.