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
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