我正在开发一个 Chrome 扩展程序，我希望用户能够添加自己的 CSS 样式来更改扩展程序页面（而不是网页）的外观。我研究过使用document.stylesheets，但它似乎希望将规则分开，并且不允许您注入完整的样式表。有没有一种解决方案可以让我使用字符串在页面上创建新的样式表？
我目前没有使用 jQuery 或类似的，所以纯 Javascript 解决方案会更好。
有几种方法可以做到这一点，但最简单的方法是创建一个<style>元素，设置其文本内容属性，并附加到页面的<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;
}
`);
如果你愿意，你可以稍微改变一下，这样 CSS 就会被替换addStyle()被调用而不是附加它。
/**
* 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 edit:请注意，IE9及以下版本仅允许最多 32 个样式表，所以在使用第一个片段时要小心。在IE10中该数字增加到4095。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
