Kann ich ein abstraktes Dokument erstellen, das von der CSS-Engine gehört wird?

Question

Es ist möglich, eine abstrakte Kopie meines Dokumentbaums zu erstellen, der auch von der CSS-Engine gehört wird?

Was meine ich mit "gehört von CSS Engine?" Wenn ich einem Element dieses abstrakten Dokuments eine ID, eine Klasse oder ein Attribut hinzufüge, muss der CSS-Selektor einfach die Eigenschaftswerte des Elements wie im echten DOM ändern, und ich muss auf diese Werte zugreifen können, indem ich den getComputedStyle Methode

ex. [CSS]

a { 
    color: red; 
} 

.bar { 
    color: blue; 
} 

ex. [DOM]

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

ex. [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

Auf Firefox können Sie

var copiedDocument = document.cloneNode(true); 

jedoch auf Chrome getComputedStyle funktioniert verwenden nur nur für Elemente im aktuellen Dokument Baum.

So können Sie so etwas wie

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