jQuery - 找出 CSS 中指定的元素的宽度（例如，如果它以 %age 指定，则以 %age 为单位，而不仅仅是以 px 为单位）答案

【问题标题】：jQuery - find out the width of an element as specified in CSS (e.g. in %age if it was specified in %age, not just in px)jQuery - 找出 CSS 中指定的元素的宽度（例如，如果它以 %age 指定，则以 %age 为单位，而不仅仅是以 px 为单位）
【发布时间】：2010-08-21 11:09:57
【问题描述】：

类似于这个问题： get CSS rule's percentage value in jQuery

但是，我正在编写一个插件，它需要根据最初指定宽度的方式优雅地处理它。如果元素最初以像素为单位指定，那很好，因为这是 .width()、.innerWidth()、outerWidth() 和 .css('width') 返回的值。

但我想知道它是否最初设置为百分比。因此，如果容器元素调整大小，那么我知道要重新计算我在元素上设置的宽度。

这可能吗？我唯一能想到的就是尝试遍历 document.stylesheets 寻找相关规则，但我认为这或多或少是不可能做到的。还有其他想法吗？

谢谢！

【问题讨论】：

您确定 .css('width') 不会将属性作为字符串返回吗？否则您将如何获得 auto 值？
我的实验似乎不是这样（从下面的答案看来，这可能与浏览器无关）。谢谢你的回答:)

标签： jquery css dimensions

【解决方案1】：

看来.css('width') 对我有用。

展示这个作品的小例子：

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<div style="width:10%;" id="foo"></div>
<script>
alert($("#foo").css('width'));
</script>

</body>
</html>

这给了我“10%”的输出。希望我没有错过任何明显的东西。

【讨论】：

我认为这不是 OP 需要的。
@pekka：想详细说明一下吗？可能是我误会了他
@data 如果我没看错，他正在寻找最初指定的，而不是有效像素宽度。
这取决于浏览器。在 IE 上，jQuery 使用 currentStyle 为您提供指定的宽度。在其他浏览器上，它使用getComputedStyle 为您提供计算样式，从% 解析为px。
实际上，我刚刚看过，这个特定的例子会起作用，因为如果 jQuery 设置为内联样式 (style="width: 10%")，它也会返回指定的值。这不适用于样式表样式。这种事情在 jQuery 的 Do What I Mean 方法中相当典型，试图隐藏基本的浏览器和概念上的差异（另请参阅 attr() 的恐怖）。它不可避免地是一个泄漏的抽象，使错误更加令人困惑。

【解决方案2】：

我找不到解决问题的方法，但我想出了一个解决方法，让我可以在我的情况下做我需要做的事情。有问题的代码适用于我的名为 jScrollPane (http://jscrollpane.kelvinluck.com/) 的 jQuery 插件。最后我所做的是将宽度设置为空（elem.css('width', null);）。这将删除我之前自己设置的宽度，并允许元素采用样式表中定义的自然宽度（即，如果它是这样定义的，则使用百分比）。然后我可以测量这个新值并使用它来将宽度设置为我想要的数字......

【讨论】：