如何使用 JavaScript 获取元素的实际继承 CSS？答案

【问题标题】：How can I get the actual inherited CSS of an element using JavaScript?如何使用 JavaScript 获取元素的实际继承 CSS？
【发布时间】：2012-04-02 20:01:39
【问题描述】：

使用 JavaScript，如何获取继承的 CSS 属性的实际值？

例如，考虑以下 HTML：

<p><span style="font-size:24pt;">Test #1</span></p>
<p style="font-size:24pt;">Test <span style="font-weight:bold;">#2</span></p>

使用 jQuery 代码$('p span').css('fontSize') 将产生32px 而不是24pt，因为它使用getComputedStyle 返回使用的值，而不是实际继承的值 .但有时样式会直接在我定位的元素上，有时会被继承。

Here is a test case。如何使用 JavaScript 获取元素的实际继承的 CSS？

【问题讨论】：

这里的问题是值被转换为像素。 32px 是 24pt。 reeddesign.co.uk/test/points-pixels.html查看此演示：jsfiddle.net/mvqPE/1
@Rocket：对。这正是我要解决的问题：-p 这就是我所说的actual 与used 值
很确定您无法获得“实际”值（缺少读取 style 属性）。 stackoverflow.com/a/1314845
看起来是这样的......
也许你可以得到px值并将其转换为pt...

标签： javascript css

【解决方案1】：

@mikerobi 的答案将满足您的测试用例，但更具体地说，浏览器公开的唯一 CSS 属性来自getComputedStyle，所以如果它错了，那也差不多了。有关更多详细信息，请参阅另一个问题中的 this answer。

【讨论】：

（似乎对 mikerobi 的引用有点过时了？）