javascript - JQuery .css（）は100％を100pxとして返します

Question

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

JQueryを使用してこのようにしています

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

pixlesの同等の値（私の場合は500px ）ではなく94pxを返します。

cssの幅を105％に設定すると、JQueryは105pxとして返します。

親コンテナの高さと幅は、それぞれ600pxと500pxです。

score 14 · Accepted Answer

考えられる原因は、寸法を取得しようとしているときに要素のコンテナが非表示になっていることだと思います。

ネストされたdivとテーブルでも同様の状況が発生しました。

動作を再現できた次のフィドルを参照してください。

%要素の次元を実際に計算できないときに、パーセンテージを整数（符号なし）として返すjQueryのバグだと思います。#another-cell（％で表される）の幅を変更し%、テーブルが非表示になっているときに符号なしで同じ値を返すことを確認します。

score 0 · Accepted Answer

返される幅は、HTMLのどの部分に書き込まれるかによって異なります。つまり、タグ内に書き込まれる場合、94％パーセントはその特定のdivの94％を反映します。

ただし、同じタグ内の別のタグがすでに定義された幅を使用している場合、infoタグの前にタグが定義されていると、情報のスペースがさらに少なくなる可能性があります。

より良い答えを得るために、より多くの実際のコードをあきらめてください

score 0 · Accepted Answer

実際にはそうではないようです。このフィドルを参照してください。

html：

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

css：

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

#info {        
    width: 94%;
}

js：

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

相対的な情報幅は何ですか？多分100px幅の要素ですか？

score 0 · Accepted Answer

この動作を説明する唯一のことは、クラスに複数の要素があることです。info

これが発生して実行すると、$('.info').css('width');jQueryはwidthセットの最初の要素のを返します。

この場合、セレクターをより具体的にする必要があるかもしれません。

score -1 · Accepted Answer

.css（）を使用すると、各ブラウザはテキストは異なりますが、論理的に等しい値を返します。たとえば、＃FFF、＃ffffff、rgb（255,255,255）などです。

.css('width')使用する代わりに.width()

jQueryによると：http：//api.jquery.com/width/

.css（width）と.width（）の違いは、後者は単位のないピクセル値（たとえば、400）を返すのに対し、前者は単位がそのままの値（たとえば、400px）を返すことです。数学計算で要素の幅を使用する必要がある場合は、.width（）メソッドをお勧めします。

5 に答える 5