如何使用JavaScript将CSS注入到网页中？

我经常发现自己需要动态修改网页上的CSS。虽然使用Element.style很容易修改单个元素的样式，但是要注入一整套新的样式并不那么容易。当使用CSS变量时，能够注入新的样式尤为方便。

我们可以稍微跳出思维定势，考虑一下我们通常如何编写CSS - 使用<style>标签。为了将一些新的CSS注入到页面中，我们将会使用这个标签。

使用Document.createElement()，我们可以创建一个新的style元素，并将其类型设置为text/css。然后，我们可以将其innerText设置为要注入的CSS字符串。最后，我们可以使用Document.head和Node.appendChild()将新元素添加到文档头部。

这样做将使浏览器解析CSS并将其应用到页面上。如果你需要保留对新创建的style元素的引用，它将被返回。

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>'