diff --git a/snippets/injectCSS.md b/snippets/injectCSS.md new file mode 100644 index 000000000..961b5b307 --- /dev/null +++ b/snippets/injectCSS.md @@ -0,0 +1,24 @@ +--- +title: injectCSS +tags: browser,intermediate +--- + +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, `document.head` and `Element.appendChild()` to append the new element to the document head. +- Return the newly created `style` element. + +```js +const injectCSS = css => { + let el = document.createElement('style'); + el.type = 'text/css'; + el.innerText = css; + document.head.appendChild(el); + return el; +} +``` + +```js +injectCSS('body { background-color: #000 }'); // '' +```