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

Question

说明

我不能相信这并没有被问过,但无论如何...请不要不混淆这个问题.

我试图使用jQuery data方法存储元素的高度,以便我可以检索此值并重置特定元素上的原始值.

但是,当我尝试获取元素的高度时,它返回计算的高度而不是实际的CSS值.虽然这在其他情况下非常有用,但实际上我需要获得样式表中指定的确切值,无论是100%,auto,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的脚本:

以及用于计算特异性的脚本:

Answer 2

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

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

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