home ~ projects ~ socials

Insert A New Dynamic Stylesheet Into A Web Document

TODO

    ☐

    Look at

    const sheet = new CSSStyleSheet();
sheet.replaceSync("a { color: red; }");
document.adoptedStyleSheets = [sheet];

NOTE: didn't get adoptedStyleSheets to work with an extension on the first try

Original notes

JavaScript

const sheet = document.createElement("style")
sheet.innerText = `
  .alfa {
    background-color: green;
  }`
document.head.appendChild(sheet)

HTML

<div class="alfa">
  Pick a card and slip it under the pack
</div>

Output

Pick a card and slip it under the pack
-- end of line --