How to load/unload css dynamically

Question

I know how to load CSS.

injectCss(styles) {
  let styleSheet = document.createElement("style");
  styleSheet.type = 'text/css';
  styleSheet.innerText = styles;
  document.head.appendChild(styleSheet);
}

How to unload it?

Try to store the reference of styleSheet somewhere and then styleSheet.remove() to remove it. — Hao Wu
– Hao Wu, Commented Mar 9, 2020 at 1:21

halfer · Accepted Answer · 2022-12-12 22:40:26Z

2

Try this:

function injectCss(styles) {
  let styleSheet = document.createElement("style");
  styleSheet.type = 'text/css';
styleSheet.setAttribute("id", "dunamicstylesheet");
  styleSheet.innerText = styles;
  document.head.appendChild(styleSheet);
}

//Create-styleSheet
injectCss('dynamic.css');

//remove-styleSheet
var stylesheet = document.getElementById('dunamicstylesheet');
stylesheet.parentNode.removeChild(stylesheet);

edited Dec 12, 2022 at 22:40

halfer

20.2k20 gold badges110 silver badges207 bronze badges

answered Mar 9, 2020 at 2:34

vadivel a

1,7921 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to load/unload css dynamically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related