在 JavaScript 中将 CSS 样式表作为字符串注入
要将自定义 CSS 样式添加到 Chrome 扩展程序的界面，我们面临着 document.stylesheets 的挑战。以下是如何使用 JavaScript 字符串注入完整的样式表：
创建并附加样式元素：
最简单的解决方案是创建一个
<code class="javascript">const style = document.createElement('style');
style.textContent = 'body { color: red; }';
document.head.append(style);</code>多个 CSS 注入：
如果需要要在一次传递中注入多种样式，您可以将上述代码包装在实用函数中：
<code class="javascript">function addStyle(styleString) {
const style = document.createElement('style');
style.textContent = styleString;
document.head.append(style);
}</code>可替换 CSS 注入：
或者，您可以修改函数覆盖以前的 CSS 注入：
<code class="javascript">const addStyle = (() => {
const style = document.createElement('style');
document.head.append(style);
return (styleString) => (style.textContent = styleString);
})();</code>IE 限制：
请注意，IE9 及以下版本限制为 32 个样式表，而 IE10 允许 4095 个。请谨慎在旧版浏览器中使用不可替换的代码时。
现代化答案：
出于安全原因，最近更新已将 .innerHTML 替换为 .textContent。更新后的代码：
<code class="javascript">const style = document.createElement('style');
style.textContent = styleString;
document.head.append(style);</code>以上是如何在 Chrome 扩展的 JavaScript 中将 CSS 样式表作为字符串注入？的详细内容。更多信息请关注PHP中文网其他相关文章！
