DOMParser - 获取元素样式
DOMParser - get element style
我正在尝试获取使用 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);
getComputedStyle
是一种只有window才有的方法。由于您的代码位于 DOM 解析器内部,因此它没有正确的上下文,因此 returns 返回该调用中的空字符串。所以,这是一种解决它的方法。您可以获取有问题的元素,将其插入 window、运行 和 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
中的内容将 RGB 转换为 HEX 的解决方案
我正在尝试获取使用 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);
getComputedStyle
是一种只有window才有的方法。由于您的代码位于 DOM 解析器内部,因此它没有正确的上下文,因此 returns 返回该调用中的空字符串。所以,这是一种解决它的方法。您可以获取有问题的元素,将其插入 window、运行 和 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
中的内容将 RGB 转换为 HEX 的解决方案