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

时间:2013-10-16 13:25:41

标签: javascript jquery html 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应用的任何样式。这种方法的明显缺陷是它将删除所有样式而不仅仅是一种...

2 个答案:

答案 0 :(得分:10)

使用jQuery,您只能获得计算值。

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

这可以方便地查明某些内容是auto100%相比还是固定大小。

用法:

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

答案 1 :(得分:3)

  

有没有办法使用jQuery获取元素的确切CSS(非计算)值?

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

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