injectCSS.md

标题	标签
injectCSS(注入样式)	browser,css(浏览器，层叠样式表)

将给定的 CSS 代码注入当前文档

• 使用 Document.createElement() 创建一个新的样式元素并将其类型设置为 text/css。
• 使用 Element.innerText 将值设置为给定的 CSS 字符串。
• 使用 Document.head 和 Element.appendChild() 将新元素附加到文档头部。
• 返回新创建的样式元素。

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

调用方式:

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

应用场景

结果如下:

<iframe src="codes/javascript/html/injectCSS.html"></iframe>