我有这段代码(简化):
var s = '<div>html...</div>';
var parser = new DOMParser();
var doc = parser.parseFromString(s, 'text/html');
生成的文档对象没有默认视图也没有窗口属性,那么有没有办法调用getComputedStyle()?
为了解释更多:我在 Firefox 扩展中使用这样的代码,它对 HTML 文件执行批处理 DOM 操作并序列化然后将修改后的文档写回磁盘。
正如 Mike 所指出的,有一个隐藏的 DOMWindow,所以我将他的代码改编为这样的东西:
const { Services } = Cu.import("resource://gre/modules/Services.jsm");
var s = '<div style="color:red;font-family:Tahoma">html...</div>';
var parser = new DOMParser();
var doc = parser.parseFromString(s, 'text/html');
var div = doc.querySelector("div");
var win = Services.appShell.hiddenDOMWindow;
var div2 = win.document.importNode(div, true);
var style = win.getComputedStyle(div2);
alert( style.getPropertyValue('color') ); //alerts rgb(255, 0, 0) which is correct!
谢谢迈克,我从来不知道有一个隐藏的DOMWindow。
这应该适用于内容或扩展:
var s = '<div>html...</div>';
var parser = new DOMParser();
var doc = parser.parseFromString(s, 'text/html');
var div = doc.querySelector("div");
var style = window.getComputedStyle(div);
如果您无法访问窗口,例如从扩展程序,那么您可以这样做:
const { Services } = Cu.import("resource://gre/modules/Services.jsm");
var s = '<div>html...</div>';
var parser = new DOMParser();
var doc = parser.parseFromString(s, 'text/html');
var div = doc.querySelector("div");
var win = Services.appShell.hiddenDOMWindow;
var style = win.getComputedStyle(div);