DOMParser - получить стиль элемента

Question

Я пытаюсь получить свойство стиля элемента, который я анализирую с помощью DOMParser. Однако 2 console.logs выглядят пустыми. Любая идея, почему это происходит?

<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 является метод, который доступен только в окне. Поскольку ваш код внутри DOM-анализатора, он не имеет правильного контекста и поэтому возвращает пустые строки обратно в этот вызов. Итак, вот способ обойти это. Вы можете взять этот элемент, вставить его в окно, запустить getComputedStyle, а затем вернуть его обратно в DOMParser (фрагмент).

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>

Вы можете посмотреть на решение конвертировать RGB в HEX с чем-то из this answer