【问题标题】:How to use getComputedStyle with DOMParser produced document (no defaultView or window objects)?如何将 getComputedStyle 与 DOMParser 生成的文档一起使用(没有 defaultView 或 window 对象)?
【发布时间】:2026-02-01 17:40:02
【问题描述】:

我有这段代码(简化):

var s = '<div>html...</div>';  
var parser = new DOMParser();  
var doc = parser.parseFromString(s, 'text/html');  

生成的文档对象没有 defaultView 也没有 window 属性,那么有没有办法调用 getComputedStyle() ?

解释更多:我在 Firefox 扩展中使用这样的代码,它对 HTML 文件执行批量 DOM 操作并序列化,然后将修改后的文档写回磁盘。

正如 Mike 所指出的,有一个 hiddenDOMWindow,所以我将他的代码修改为这样的:

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!

谢谢 Mike,我从来不知道有一个 hiddenDOMWindow。

【问题讨论】:

  • 感谢 Mike,虽然您的代码可以正常运行,但它无法正常工作!返回的 CSSStyleDeclaration 对象将所有属性值设置为默认值。但它给了我需要的指针,所以我接受了答案。

标签: javascript firefox gecko


【解决方案1】:

这应该适用于内容或扩展:

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);

【讨论】:

  • 这行不通。 Computed Style 仅适用于添加到窗口文档的元素。虽然您可以调用该方法并获得响应,但样式不会是正确的,而是每个标签的默认样式。