DOMParser - get element style

Question

Ich versuche, eine Stileigenschaft eines Elements zu erhalten, das ich mit DOMParser parse. Die 2 console.logs erscheinen jedoch leer. Irgendeine Idee, warum das passiert?

<div id='foobar'> 
    <style> 
    .xl496 
    { 
    color:#336699; 
    } 
    </style> 

    <table> 
    <tr> 
    <td class='xl496'>Test:</td> 
    </tr> 
    </table> 
</div> 

---

var data = document.getElementById("foobar"); 

var parser = new DOMParser(); 
var doc = parser.parseFromString(data.innerHTML, "text/html"); 
var cols = doc.getElementsByTagName("tr"); 
var col = cols[0]; 
var tds = col.getElementsByTagName("td"); 
var td = tds[0]; 

console.log(getComputedStyle(td).getPropertyValue("color")); 
console.log(td.style.color); 

Answer 1

getComputedStyle ist eine Methode, die nur zu dem Fenster ist. Da sich Ihr Code in einem DOM-Parser befindet, hat er nicht den richtigen Kontext und gibt daher in diesem Aufruf leere Zeichenfolgen zurück. Also, hier ist ein Weg, um es zu umgehen. Sie können das fragliche Element nehmen, es in das Fenster einfügen, das getComputedStyle ausführen und es dann wieder in den DOMParser (Fragment) einfügen.

var clipboardData = document.getElementById("foobar").outerHTML; 
 

 

 
var parser = new DOMParser(); 
 
var doc = parser.parseFromString(clipboardData, "text/html"); 
 

 
var col = doc.querySelector("tr"); 
 
var td = col.querySelector("td"); 
 

 
// td has to be in the window, not a fragment in order to use window.getComputedStyle 
 
document.body.appendChild(td); 
 

 
console.log(window.getComputedStyle(td).getPropertyValue("color")); 
 
// the next one expected to be "" since it does not have inline styles 
 
console.log(td.style.color); 
 

 
// Insert the td back into the dom parser where it was 
 
col.insertBefore(td, col.firstChild);

<div id='foobar'> 
 
    <style> 
 
    .xl496 { 
 
     color: #336699; 
 
    } 
 
    </style> 
 

 
    <table> 
 
    <tr> 
 
     <td class='xl496'>Test:</td> 
 
    </tr> 
 
    </table> 
 
</div>

Sie an einer Lösung suchen können RGB konvertieren von etwas zu verhexen this answer