使用jQuery 获取CSS中指定的实际值
说明
我不敢相信以前没有问过,但无论如何……请不要对这个问题感到困惑。
我试图使用jQuery data
方法存储元素的高度,以便我可以检索此值并重置特定元素上的原始值。
但是,当我尝试获取元素的高度时,它返回计算的高度而不是实际的CSS值。 虽然这在其他情况下非常有用,但我实际上需要获得样式表中指定的确切值,无论是100%,auto,10px等…
我的问题
有没有办法使用jQuery获取元素的确切CSS(非计算)值?
例如(CSS):
#wrapper { height: auto; }
和JS:
// Returns 'auto' NOT computed value... var height = $('#wrapper').height();
更多的信息
我目前唯一可以看到的替代方法是删除元素上的内联style
标记,这将删除jQuery应用的任何样式。 这种方法的明显缺陷是它将删除所有样式,而不仅仅是一个…
有没有办法使用jQuery获取元素的确切CSS(非计算)值?
您只能通过DOM检索px
的计算值。
话虽这么说,您可以通过获取元素高度并将其与父级的高度进行比较来计算出百分比。 em
, en
和其他测量是不可能的。
使用jQuery,您只能获得计算值。
作为替代方案,我编写了一个脚本来查找原始css值,方法是枚举应用于页面的样式表,匹配选择器并按优先级和CSS特性进行权衡。
这对于找出某些东西是否为auto
对比100%
与固定大小是很方便的。
用法:
resolveAppliedStyle(document.getElementById("wrapper"), "height");
您可以从以下位置获取resolveAppliedStyle的脚本:
以及用于计算特异性的脚本:
https://github.com/keeganstreet/specificity/blob/master/specificity.js