30-seconds-of-code/snippets/injectCSS.md

title, tags, cover, firstSeen, lastUpdated

title	tags	cover	firstSeen	lastUpdated
Inject CSS	browser,css	blog_images/dark-leaves-5.jpg	2020-10-15T22:18:00+03:00	2020-10-22T20:23:47+03:00

Injects the given CSS code into the current document

• Use Document.createElement() to create a new style element and set its type to text/css.
• Use Element.innerText to set the value to the given CSS string.
• Use Document.head and Element.appendChild() to append the new element to the document head.
• Return the newly created style element.

const injectCSS = css => {
  let el = document.createElement('style');
  el.type = 'text/css';
  el.innerText = css;
  document.head.appendChild(el);
  return el;
};

injectCSS('body { background-color: #000 }');
// '<style type="text/css">body { background-color: #000 }</style>'