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

简单得多

Answer 2

如果您尝试在javascript中编写css，请执行以下操作：

var s = document.createElement('style');
s.type = 'text/css';
s.innerText = 'body { background: #222; } /*... more css ..*/';
document.head.appendChild(s);

然而，如果您尝试从服务器加载样式表：

var s = document.createElement('link');
s.type = 'text/css';
s.rel = 'stylesheet';
s.href = '/url/to/css/file.css';
document.head.appendChild(s);

Answer 3

据我所知，接近您所要求的唯一方法是仅限IE document.createStyleSheet([url] [,index])方法，您可以使用该方法创建最多31个< sup> * styleSheet个对象（在此之后您仍然需要手动创建style元素并将它们附加到document）。

This answer显示了如何为非IE浏览器定义createStyleSheet()方法，但正如您所希望的那样，通过添加link / style元素（出于某种原因，你试图避免）。

^* IE 6到9仅限于31个导入的样式表due to 5-bit field used for storing sheet IDs。在IE10中，此限制已提升至4095。

Answer 4

Object.create(CSSStyleSheet.prototype)

返回一个CSSStyleSheet的空实例。换句话说，它完全符合您的期望new CSSStyleSheet。

任何支持ECMAScript 5的浏览器都可以使用

Object.create。找到兼容性表here。

Answer 5

你试过这个：

var myCSSStyleSheetIbj = Object.create(document.styleSheets[0])

假设document.styleSheets [0]是一个CSSStyleSheet对象，实际上，如果你用任何CSSStyleSheet替换document.styleSheets [0]，它将起作用。

Answer 6

是的，你可以。无法直接修改document.styleSheets，但您可以通过向文档添加新样式标记来添加条目：

// Create the style element
var elem = $('<style id="lwuiStyle"></style>');
$('head').append(elem);

// Find its CSSStyleSheet entry in document.styleSheets
var sheet,
    yourSheet = null;
for (var sid in document.styleSheets) {
    if (document.styleSheets.hasOwnProperty(sid)) {
        sheet = document.styleSheets[sid];
        if (sheet.ownerNode == elem[0]) {
            yourSheet = sheet;
            break;
        }
    }
}

// Test it by changing the background colour
yourSheet.insertRule('body {background-color: #fa0}', yourSheet.cssRules.length);

如果您运行Firefox，则可以在Scratchpad中直接测试：复制代码，按Shift+F4，粘贴代码，然后使用Ctrl+L运行代码。玩得开心！

Answer 7

有a brand new proposal使得可以直接调用CSSStyleSheet构造函数。做你想要的样子：

// Construct the CSSStyleSheet
const stylesheet = new CSSStyleSheet();

// Add some CSS
stylesheet.replaceSync('body { background: #000 !important; }')
// OR stylesheet.replace, which returns a Promise instead

// Tell the document to adopt your new stylesheet.
// Note that this also works with Shadow Roots.
document.adoptedStyleSheets = [stylesheet];

请注意，目前这仅适用于Chrome Canary，但希望其他浏览器会尽快实现此功能。

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

7 个答案: