javascript - 使用 jQuery 获取 CSS 中指定的实际值

Question

解释

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

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

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

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

例如（CSS）：

#wrapper {
    height: auto;
}

和 JS：

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

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

score 10 · Accepted Answer

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

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

这对于找出某物是否auto与100%固定大小相比非常方便。

用法：

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

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

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

score 3 · Accepted Answer

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

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

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