使用jQuery获取CSS中指定的实际值[重复]

Question

说明

我不敢相信以前没有人问过这个问题，但无论如何......请不要对这个question感到困惑。

我正在尝试使用 jQuery data 方法存储元素的高度，以便我可以检索此值并重置特定元素的原始值。

但是，当我尝试获取元素的高度时，它会返回计算出的高度，而不是实际的 CSS 值。虽然这在其他情况下非常有用，但我实际上需要获取样式表中指定的确切值，无论是 100%、自动、10px 等...

我的问题

有没有办法使用 jQuery 获取元素的准确 CSS（非计算）值？

例如（CSS）：

#wrapper {
    height: auto;
}

还有 JS：

// Returns 'auto' NOT computed value...
var height = $('#wrapper').height();

更多信息

我目前能看到的唯一替代方法是删除元素上的内联 style 标签，这将删除 jQuery 应用的任何样式。这种方法的明显缺陷是它会删除所有样式，而不仅仅是一个特定的样式......

Answer 1

使用jQuery只能得到计算出来的值。

作为替代方案，我编写了一个脚本，通过枚举应用于页面的样式表、匹配选择器并通过优先级和 CSS 特异性对其进行权衡来查找原始 css 值。

这对于找出某个东西是 auto 还是 100% 还是固定大小非常方便。

用法：

resolveAppliedStyle(document.getElementById("wrapper"), "height");

您可以从以下位置获取 resolveAppliedStyle 的脚本：

https://github.com/stephen-james/FixedHeaderTable/blob/master/dependencies/lib/resolveAppliedStyle.js

以及它用来计算特异性的脚本：

https://github.com/keeganstreet/specificity/blob/master/specificity.js

Answer 2

有没有办法使用 jQuery 获取元素的准确 CSS（非计算）值？

您只能通过 DOM 检索 px 中的计算值。

话虽如此，您可以通过获取元素高度并将其与父元素的高度进行比较来计算百分比。无法进行em、en 和其他测量。