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

我知道document.styleSheets其中包括在一个页面中的所有有效的样式表。我想知道我是否可以创建一个新的并通过javascript将其附加到当前列表。Javascript：我可以动态创建一个CSSStyleSheet对象并插入它吗？

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

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

来源

2011-11-21 ayanamist

HTTP搜索简单多了： //stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript –

只需创建一个新的'style'元素，并追加它。一个新的'CSSStyleSheet'将被创建。 – Shea

至于我知道，来接近你问什么是的唯一方法IE只document.createStyleSheet([url] [,index])方法，你可以用它来创建多达31 ^*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

来源

2011-11-21 10:08:30

_ *闪烁* _。 IE仍然继续给我留下深刻的印象。 –

如果您正在尝试写javascript内的CSS，这样做：

var s = document.createElement('style'); 
s.type = 'text/css'; 
s.innterText = '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);

来源

2011-11-21 08:41:43 regality

对不起，但我已经说过我知道这种方法。我想知道我是否可以直接用javascript创建这个对象。 – ayanamist

uuhhhh ....这是javascript，老兄。你到底什么意思？ – regality

不要使用'innerText'，它不是任何标准的一部分，并且没有完整的浏览器兼容性。使用's.appendChild（document.createTextNode（styles））'完全兼容。 –

你试试这个：

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

假设document.styleSheets [0]是的CSSStyleSheet对象，其实如果更换document.styleSheets [0]与任何CSSStyleSheet它将工作。

来源

2013-02-05 15:15:32 StaticBug

要创建一个* empty *对象，您可能更愿意在这里使用Object.create（Object.getPrototypeOf（document.styleSheets [0]））' - 但添加对象似乎不被允许。 –

太棒了，但是一旦我创建它，我如何将它插入到我的文档中？ – 2014-09-25 17:10:11

是的，可以。该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，你可以直接在便签测试：复制代码，按Shift+F4，粘贴它，然后使用Ctrl+L运行代码。玩的开心！

来源

2013-07-02 10:18:43

Object.create(CSSStyleSheet.prototype)

给你回的CSSStyleSheet的空实例。换句话说，它的确如你所期望的new CSSStyleSheet所做的那样。

Object.create与ECMAScript中5支持的任何浏览器。找到兼容性表here。

来源

2014-02-17 00:18:45 daluege

也许你可以详细说明一下吗？而不是张贴一行相当神秘的代码？ – Carpetsmoker

这是问题的答案，所以在我眼中，任何评论都是不必要的。该语句返回一个CSSStyleSheet的新实例，就是这样。 – daluege

太棒了，现在我有一个新的对象，我如何将它插入到我的文档？ – 2014-09-25 17:12:03

我知道你说过你不想创建一个元素，但这是真正实现它的唯一方法。有几个人详细介绍这种方法上面，但是我发现没有人盖关闭该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

来源

2014-06-18 12:44:10 WickyNilliams

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

回答

相关问题