How to load up CSS files using JavaScript?

Sometimes, we want to load up CSS files using JavaScript.

In this article, we’ll look at how to load up CSS files using JavaScript.

How to load up CSS files using JavaScript?

To load up CSS files using JavaScript, we use createElement.

For instance, we write

const cssId = "myCss";
if (!document.getElementById(cssId)) {
  const head = document.head;
  const link = document.createElement("link");
  link.id = cssId;
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = "http://website.example/css/stylesheet.css";
  link.media = "all";
  head.appendChild(link);
}

to call createElement to create a link element.

Then we set the attributes with the same name as the property names with

link.id = cssId;
link.rel = "stylesheet";
link.type = "text/css";
link.href = "http://website.example/css/stylesheet.css";
link.media = "all";

And then we call head.appendChild to append the link as the last child of the head element.

Conclusion

To load up CSS files using JavaScript, we use createElement.