在不將樣式表添加到頭部的情況下訪問CSS樣式表的規則

Question

我已經用AJAX加載了樣式表，文件存儲在data變量中。 現在，我需要訪問它的規則（它背后有一個功能）。 我現在使用的解決方案是這樣的：

stylesheet = document.createElement('style');
stylesheet.type = 'text/css';
stylesheet.innerHTML = data;

document.head.appendChild(stylesheet);
stylesheet = document.styleSheets[2]; // I know which one is my file

rules = stylesheet.rules || stylesheet.cssRules;

現在的問題是，將其添加到頭部時，頁面上將應用樣式。 我該如何做而又不加思索？

使用Object.create（CSSStyleSheet.prototype）嘗試了各種方法，但無法完成...

Answer 1

我只需創建一個空的隱藏iframe並在其中附加樣式表即可。 這樣，它不會影響任何內容，您仍然可以讀取其cssRules。

例如：

stylesheet = document.createElement('style');
stylesheet.type = 'text/css';
stylesheet.innerHTML = data;

var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);

var iframeDoc = iframe.contentWindow.document || iframe.contentDocument;
iframeDoc.body.appendChild(stylesheet);

stylesheet = iframeDoc.styleSheets[0];
rules = stylesheet.rules || stylesheet.cssRules;

演示： http ： //plnkr.co/edit/hlNlpzfRmLP8IYYwePeC？p = preview