在不添加样式表的情况下访问CSS样式表规则

时间:2015-02-27 18:50:18

标签: javascript html css

我已经用AJAX加载了样式表,该文件存储在数据变量中。现在我需要访问它的规则(它背后有一个功能)。我现在使用的解决方案是:

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)尝试过各种各样的东西但是无法完成它......

1 个答案:

答案 0 :(得分:3)

我只需创建一个空的隐藏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