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對象並插入它嗎？

回答

相關問題