Javascript 如何获得HTML元素的最终计算样式值？

如何在JavaScript中获得HTML元素的最终、最终、继承后样式值？我已经知道它只获取内联样式，并且只对内联样式进行基本转换（它似乎没有从样式表继承任何内容）。如何获取继承的样式值

我不喜欢使用jQuery（因为我知道纯JavaScript解决方案是可能的，尽管jQuery已经在我的应用程序中使用）。我不知道样式表的配置是什么，因为这些样式表是与一起编译的

我的具体情况是，我试图从样式表中为基于画布的绘图任务获取业务定义的颜色，并且颜色在CSS中定义。我目前正在尝试使用如下代码来提取实体

var testElement = document.createElement("span");
var entity_type_color_table = {};
function getEntityTypeColor(entity_type) {
    if (!entity_type_color_table[entity_type]) {
        testElement.className = entity_type + "-color";
        entity_type_color_table[entity_type] = 
            document.defaultView.getComputedStyle(testElement, null)
            .getPropertyValue("color");
    }         
    return entity_type_color_table[entity_type];     
}

---

这个问题可能会有所帮助：以及

---

您可以使用document.styleSheets获取外部和内联样式，正如@puzz84所指出的，jquery的.css（）

您没有看到任何样式表样式，因为您没有将测试元素附加到文档。创建

testElement

后，执行以下操作：

document.body.appendChild(testElement);

应该足够了

或者，如果永久连接测试元素是一个问题，您可以在测试函数中连接和分离它：

if (!entity_type_color_table[entity_type]) {
    testElement.className = entity_type + "-color";
    document.body.appendChild(testElement);
    entity_type_color_table[entity_type] = 
        document.defaultView.getComputedStyle(testElement, null)
        .getPropertyValue("color");
    testElement.remove();
}     

---

我想您可能只想使用jQuery来解决这个问题。通过使用.css（）。原因是jQuery已经处理了很多浏览器不一致的问题。当我用适当的DOM节点（请参见：）替换它时，它会正确地返回颜色。这可能是您在

getComputedStyle

中看不到任何值的原因吗？您知道，您可以使用document.styleSheets[0].cssrules来读取特定样式表的规则，这正是我在评论中的想法。是的，就是这样。把它放在DOM的某个地方，它就像一个符咒。谢谢你指出这一点。