Como carregar arquivo de CSS com JavaScript

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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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!