DOMParser - 要素スタイルを取得

Question

私はDOMParserで解析する要素のスタイルプロパティを取得しようとしています。しかし、2つのconsole.logが空になります。なぜこのようなことが起こるのか？

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

あなたはthis answer