Javascript:我可以动态创建一个 CSSStyleSheet 对象并插入它吗？

Question

我知道document.styleSheets它由页面中的所有有效样式表组成。我想知道我是否可以创建一个新的并通过 javascript 将其附加到当前列表。

我试过document.styleSheets[0].constructor , document.styleSheets[0].__proto__.constructor , new CSSStyleSheet , CSSStyleSheet() ，我从 Chrome 中得到的只是 TypeError: Illegal constructor . CSSStyleSheet.constructor()返回一个纯对象，但我期望一个 CSSStyleSheet 对象。

我知道我可以创建一个链接/样式元素并附加它，然后修改它。我想知道的是，我可以直接用javascript创建这样的对象吗？

Answer 1

我知道你说过你不想创建一个元素，但这确实是唯一的方法。一些人在上面详细介绍了这种方法，但我注意到没有人掩盖 HTMLStyleElement和 HTMLLinkElement两者都有一个整洁的 sheet property直接访问他们的CSSStyleSheet :

var style = document.createElement("style");
document.head.appendChild(style); // must append before you can access sheet property
var sheet = style.sheet;

console.log(sheet instanceof CSSStyleSheet);

比搜索 document.styleSheets 简单得多