Categories
JavaScript Answers

How to add CSS to the HTML head element in JavaScript?

Spread the love

Sometimes, we want to add CSS to the HTML head element in JavaScript.

In this article, we’ll look at how to add CSS to the HTML head element in JavaScript.

How to add CSS to the HTML head element in JavaScript?

To add CSS to the HTML head element in JavaScript, we use createElement and appendChild.

For instance, we write

const addCssToDocument = (css) => {
  const style = document.createElement("style");
  style.innerText = css;
  document.head.appendChild(style);
};

to define the addCssToDocument function.

In it, we call createElement to create a style element.

Then we set its innerText property to a css string.

Next, we call document.head.appendChild with style to append the style element has the head element’s last child.

Conclusion

To add CSS to the HTML head element in JavaScript, we use createElement and appendChild.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.