我可以创建一个由CSS引擎监听的抽象文档吗?

Question

是否可以

创建我的文档树的抽象副本，该副本也被CSS引擎侦听？

"由 CSS 引擎监听"是什么意思？简单地说，当我向这个抽象文档的元素添加 id、类或属性时，CSS 选择器必须像在实际 DOM 中一样更改元素的属性值，并且我必须能够使用 getComputedStyle 方法访问这些值

例如 [CSS]

a {
    color: red;
}
.bar {
    color: blue;
}

例如 [DOM]

<a href="#">Lorem</html>

例如 [JavaScript]

var copiedDocument = document.copy();
var abstractLink = copiedDocument.getElementsByTagName('a')[0];
/* RETURN => red */
getComputedStyle(abstractLink).getPropertyValue("color");
abstractLink.setAttribute("class", "bar");
/* MUST RETURN => blue */
getComputedStyle(abstractLink).getPropertyValue("color");

Answer 1

在 Firefox 上，你可以使用

var copiedDocument = document.cloneNode(true);

但是，在 Chrome 上，getComputedStyle仅适用于当前文档树中的元素。

所以你可以使用类似的东西

var iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
var doc = iframe.contentDocument;
doc.replaceChild(document.documentElement.cloneNode(true), doc.documentElement);
var abstractLink = doc.getElementsByTagName('a')[0];
getComputedStyle(abstractLink).getPropertyValue("color"); // "rgb(255, 0, 0)"
abstractLink.className = "bar";
getComputedStyle(abstractLink).getPropertyValue("color"); // "rgb(0, 0, 255)"
document.body.removeChild(iframe);