使用Javascript将CSS样式表作为字符串注入
使用Javascript将CSS样式表作为字符串注入
提问于 2013-03-20 00:33:46
我正在开发一个Chrome扩展，我希望用户能够添加自己的CSS样式来更改扩展页面(而不是网页)的外观。我已经研究过使用document.stylesheets，但它似乎希望拆分规则，并且不允许您注入完整的样式表。有没有一种解决方案可以让我使用字符串在页面上创建新的样式表？
我目前没有使用jQuery或类似的东西，所以纯Javascript解决方案会更好。
回答 4
Stack Overflow用户
发布于 2016-06-28 05:23:46
多亏了this guy，我才能找到正确的答案。下面是它的实现方式：
function addCss(rule) {
let css = document.createElement('style');
css.type = 'text/css';
if (css.styleSheet) css.styleSheet.cssText = rule; // Support for IE
else css.appendChild(document.createTextNode(rule)); // Support for the rest
document.getElementsByTagName("head")[0].appendChild(css);
}
// CSS rules
let rule = '.red {background-color: red}';
rule += '.blue {background-color: blue}';
// Load the rules and execute after the DOM loads
window.onload = function() {addCss(rule)};Stack Overflow用户
发布于 2020-09-17 19:03:41
你听说过承诺吗？它们可以在所有现代浏览器上运行，并且使用起来相对简单。看一下这个将css注入到html头的简单方法：
function loadStyle(src) {
return new Promise(function (resolve, reject) {
let link = document.createElement('link');
link.href = src;
link.rel = 'stylesheet';
link.onload = () => resolve(link);
link.onerror = () => reject(new Error(`Style load error for ${src}`));
document.head.append(link);
});
}您可以按如下方式实现：
window.onload = function () {
loadStyle("https://fonts.googleapis.com/css2?family=Raleway&display=swap")
.then(() => loadStyle("css/style.css"))
.then(() => loadStyle("css/icomoon.css"))
.then(() => {
alert('All styles are loaded!');
}).catch(err => alert(err));
}这真的很酷，对吧？这是一种使用Promises来决定样式优先级的方法。
或者，如果要同时导入所有样式，可以执行以下操作：
function loadStyles(srcs) {
let promises = [];
srcs.forEach(src => promises.push(loadStyle(src)));
return Promise.all(promises);
}像这样使用它：
loadStyles([
'css/style.css',
'css/icomoon.css'
]);您可以实现自己的方法，例如按优先级导入脚本、同时导入脚本或同时导入样式和脚本。如果我得到更多的选票，我会发布我的实现。
如果您想了解有关Promise的更多信息，请阅读更多here
Stack Overflow用户
发布于 2014-05-07 21:53:09
我最近也有同样的需求，并写了一个函数来做与Liam相同的事情，除了也允许多行CSS。
injectCSS(function(){/*
.ui-button {
border: 3px solid #0f0;
font-weight: bold;
color: #f00;
}
.ui-panel {
border: 1px solid #0f0;
background-color: #eee;
margin: 1em;
}
*/});
// or the following for one line
injectCSS('.case2 { border: 3px solid #00f; } ');source of this function。您可以从Github repo执行download操作。或者看到更多的example usage here。
我更喜欢使用use it with RequireJS，但是在没有AMD加载器的情况下，它也可以作为一个全局函数工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15505225
复制相关文章
相似问题