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（）方法。