Como criar uma tag style com JavaScript

Neste artigo você vai aprender a como criar uma tag style com JavaScript, isso é bem simples, pois a tag style é similar as outras tags do HTML

Fala programador(a), beleza? Bora aprender mais sobre DOM e JavaScript!

A criação de uma tag é considerada também manipulação de DOM, embora style seja uma meta tag

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

474 aulas
20 projetos
39h 27min

Pois não é um elemento visível no HTML e serve apenas para aplicar estilos de CSS

Então vamos seguir a ideia de criação de uma tag comum, porém dentro da tag head

Podemos acessá-la através de document e utilizar um método chamado insertAdjancentHTML para inserir a tag style

Veja um exemplo:

document.head.insertAdjacentHTML("beforeend", `
<style>
	body {
   font-size: 2em;
   color: blue;
  }
</style>
`)

Como estamos utilizando o recurso de template strings para criar a tag style, podemos quebrar linhas livremente

Veja como fica mais legível o código, onde adicionamos duas regras de CSS a tag body

Agora basta você inserir o CSS que deseja e pronto!

Conclusão

No artigo de hoje você aprendeu a como criar uma tag style com JavaScript

Utilizamos um método chamado inserAdjacentHTML na tag head

Após isso foram criados os estilos através de template strings, onde é possível a quebra de linhas, facilitando a leitura do código e também a futura manutenção do mesmo

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos