Categories
JavaScript Answers

How to replace CSS file on the fly and apply the new style to the page with JavaScript?

Spread the love

Sometimes, we want to replace CSS file on the fly and apply the new style to the page with JavaScript.

In this article, we’ll look at how to replace CSS file on the fly and apply the new style to the page with JavaScript.

How to replace CSS file on the fly and apply the new style to the page with JavaScript?

To replace CSS file on the fly and apply the new style to the page with JavaScript, we can set the media attribute of the link element.

For instance, we write

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="light.css" media="none" id="light" />
<link rel="stylesheet" href="dark.css" media="none" id="dark" />

to add a few style sheets.

Then we write

const enableStylesheet = (node) => {
  node.media = "";
};

const disableStylesheet = (node) => {
  node.media = "none";
};

to define the enableStylesheet and disableStylesheet functions.

We set node.media to an empty string in enableStylesheet to enable the stylesheet.

And we set node.media to 'none' in disableStylesheet to disable the stylesheet.

Conclusion

To replace CSS file on the fly and apply the new style to the page with JavaScript, we can set the media attribute of the link element.

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.