如何在 HTML 元素上获得最终的、最终计算的样式值？答案

【问题标题】：How to get the ultimate, final calculated style value on an HTML element?如何在 HTML 元素上获得最终的、最终计算的样式值？
【发布时间】：2016-03-09 19:32:33
【问题描述】：

如何在 JavaScript 中为 HTML 元素获得最终的、最终的、继承后的样式值？我已经知道element.style 只获取内联样式，而getComputedStyle() 只对内联样式进行基本转换（它似乎没有从样式表继承任何东西）。如何获取继承的样式值？

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

我的具体情况是，我试图从样式表中为基于画布的绘图任务获取业务定义的颜色，并且颜色在 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];     
}

【问题讨论】：

我想你可能只想使用 jQuery 来解决这个问题。通过使用 .css()。原因是 jQuery 已经处理了很多浏览器的不一致问题。
我注意到您使用的是document.createElement('span');。当我用适当的 DOM 节点替换它时（请参阅：jsfiddle.net/12dsjur3），它会正确返回颜色。这可能是您没有看到来自 getComputedStyle 的任何值的原因吗？
您知道您可以使用 document.styleSheets[0].cssRules 读取特定样式表的规则

标签： javascript html css

【解决方案1】：

您没有看到任何样式表样式，因为您没有将测试元素附加到文档。创建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();
}

【讨论】：

正是我在评论中的想法。
是的，就是这样。把它放在 DOM 的某个地方，它就像一个魅力。感谢您指出这一点。

【解决方案2】：

这里的这个问题可能会有所帮助：jQuery - How to get all styles/css (defined within internal/external document) with HTML of an element 以及 Can jQuery get all CSS styles associated with an element?

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

【讨论】：