Dan*_*nka 32 javascript css dom google-chrome-extension
我正在开发Chrome扩展程序,我希望用户能够添加自己的CSS样式来更改扩展程序页面(而不是网页)的外观.我已经研究过使用document.stylesheets,但似乎它希望将规则拆分,并且不会让你注入完整的样式表.有没有一个解决方案可以让我使用字符串在页面上创建一个新的样式表？
我目前没有使用jQuery或类似的,所以纯Javascript解决方案会更好.
Lia*_*rch 63
您可以创建样式元素并将字符串添加为innerHTML.像这样的东西:
function addStyleString(str) {
var node = document.createElement('style');
node.innerHTML = str;
document.body.appendChild(node);
}
addStyleString('body { color: red }');
addStyleString('body { background: silver }');
// This way allows you to add CSS in multiple passes
(重要编辑:请注意,IE9及以下版本仅允许最多32个样式表,因此请注意使用上述代码段.在IE10中,该数字增加到4095.)
如果,当用户添加新CSS时,您希望删除旧样式并添加新样式,则可以切换该功能,以便引用一个节点.
(function() {
var node = document.createElement('style');
document.body.appendChild(node);
window.addStyleString = function(str) {
node.innerHTML = str;
}
}());
addStyleString('body { color: red }');
addStyleString('body { background: silver }');
// This way will remove the old style when the new one is added
Joh*_*rry 16
多亏了这个家伙,我才能找到正确的答案.以下是它的完成方式:
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)};
你听说过 Promise 吗？它们适用于所有现代浏览器，并且使用起来相对简单。看看这个将 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));
}
真的很酷，对吧？这是一种使用 Promise 来决定样式优先级的方法。
或者，如果您想同时导入所有样式，您可以执行以下操作：
function loadStyles(srcs) {
let promises = [];
srcs.forEach(src => promises.push(loadStyle(src)));
return Promise.all(promises);
}
像这样使用它：
loadStyles([
'css/style.css',
'css/icomoon.css'
]);
您可以实现自己的方法，例如按优先级导入脚本、同时导入脚本或同时导入样式和脚本。
如果您想了解有关 Promise 的更多信息，请在此处阅读更多内容
我认为注入任何 HTML 字符串的最简单方法是通过：insertAdjacentHTML
// append style block in <head>
const someStyle = `
<style>
#someElement { color: green; }
</style>
`;
document.head.insertAdjacentHTML('beforeend', someStyle);
| 归档时间： |
|
| 查看次数： |
48983 次 |
| 最近记录： |