使用Javascript将CSS样式表作为字符串注入

小编典典

使用Javascript将CSS样式表作为字符串注入

css

我正在开发Chrome扩展程序，我希望用户能够添加自己的CSS样式来更改扩展程序页面（而非网页）的外观。我已经研究过使用document.stylesheets，但是似乎要分割规则，并且不允许您插入完整的样式表。有没有可以让我使用字符串在页面上创建新样式表的解决方案？

我目前不使用jQuery或类似的产品，因此最好使用纯Javascript解决方案。

阅读 416

2020-05-16

共1个答案

小编典典

有两种方法可以完成此操作，但是最简单的方法是创建一个<style>元素，设置其 textContent
属性，并将其追加到页面的<head>。

/**
 * Utility function to add CSS in multiple passes.
 * @param {string} styleString
 */
function addStyle(styleString) {
  const style = document.createElement('style');
  style.textContent = styleString;
  document.head.append(style);
}

addStyle(`
  body {
    color: red;
  }
`);

addStyle(`
  body {
    background: silver;
  }
`);

如果需要，可以稍作更改，以便在addStyle()调用CSS时替换CSS，而不是附加CSS 。

/**
 * Utility function to add replaceable CSS.
 * @param {string} styleString
 */
const addStyle = (() => {
  const style = document.createElement('style');
  document.head.append(style);
  return (styleString) => style.textContent = styleString;
})();

addStyle(`
  body {
    color: red;
  }
`);

addStyle(`
  body {
    background: silver;
  }
`);

IE编辑：
请注意IE9及以下版本最多只允许32个样式表，因此在使用第一个代码片段时要格外小心。IE10中的数量增加到4095。

2020编辑：
这个问题很老，但是我仍然偶尔收到有关此问题的通知，因此我将代码更新为稍微现代一点的代码，并替换.innerHTML为.textContent。此特定实例是安全的，但最好避免使用innerHTML这种做法，因为它可能是XSS攻击媒介。

2020-05-16