Neste artigo você vai aprender a como carregar arquivo de CSS com JavaScript, ou seja, incluir um arquivo de estilos externo com JS
Fala programador(a), beleza? Bora aprender mais sobre arquivos externos com JavaScript!
Para adicionar o arquivo de externo ao nosso código, vamos ter que criar um elemento link
Como a tag que inserimos normalmente um arquivo de CSS
Depois vamos configurar as propriedades do elemento, que basicamente são:
- rel como stylesheet;
- type como text/css;
- href como a source do arquivo;
E por último é necessário inserir o elemento no head, podemos fazer isso com appendChild
Veja um código na prática:
const headElement = document.getElementsByTagName('head')[0];
const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://meusite.com.br/css/meuarquivo.css';
headElement.appendChild(link);
Perceba que o href deve ser o caminho relativo até o arquivo que você quer adicionar no projeto
E assim temos a adição de CSS com JS! 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
No artigo você viu como carregar arquivo de CSS com JavaScript
Utilizamos um passo a passo bem clássico para quem já trabalha com DOM
Foi necessário criar o elemento de link, configurar seus atributos e colocá-lo na head da nossa página
Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!