我已经使用 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) 尝试了各种操作,但无法完成...
最佳答案
我只需创建一个空的隐藏 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;
关于javascript - 访问CSS样式表的规则而不将样式表添加到头部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28772200/