JQuery .css（）返回100％为100px

Question

<style>
.info{
        width:94%;
      }
</style>

现在使用JQuery做这样的事情

$('.info').css('width');

返回94px而不是pixles中的等效值（在我的情况下是500px 。）

如果我将css中的宽度设置为105％ ，JQuery会将其返回为105px 。

父容器的高度和宽度分别为600px和500px。

Answer 1

我认为可能的原因是在您尝试获取尺寸时隐藏元素的容器。

我有嵌套div和表的类似情况。

请参阅以下小提琴，我设法重现行为：

http://jsfiddle.net/36yvb/

我仍然认为这是jQuery中的一个错误，当不能实际计算元素的维度时，将百分比作为整数返回（没有%符号）。 更改#another-cell的宽度（以％表示），并在隐藏表时看到它返回相同的值而不带%符号。

Answer 2

实际上，它似乎并非如此： 看到这个小提琴 。

HTML：

<div id="info"></div>

CSS：

html, body {
    position: relative;
    width: 500px;
}

#info {        
    width: 94%;
}

JS：

$( function() {
    document.write( $('#info').css('width') );
});

什么是信息宽度相对于？ 是宽度为100px的元素吗？

Answer 3

它返回的宽度取决于它所写入的HTML的哪个部分。意思是说，如果它写在标签内，则94％的百分比将反映该特定div的94％。

但是，如果同一标签中的另一个标签已经使用了一定数量的定义宽度，那么如果在信息标签之前定义的标签，信息甚至可能会获得更小的空间。

请放弃更多实际代码以获得更好的答案

Answer 4

解释这种行为的唯一方法是你有多个带有类info元素

当发生这种情况并且你做$('.info').css('width'); jQuery将返回集合中第一个元素的width 。

如果是这种情况，您可能需要更具体地使用选择器。

DEMO

Answer 5

当使用.css（）时，每个broswer将返回文本上不同但逻辑上相等的值，例如＃FFF，＃fffff和rgb（255,255,255）

而不是使用.css('width')使用.width()

根据jQuery： http ： //api.jquery.com/width/

.css（width）和.width（）之间的区别在于后者返回无单位像素值（例如，400），而前者返回单位完整的值（例如，400px）。 当需要在数学计算中使用元素的宽度时，建议使用.width（）方法。