2

同じものに対して2つの異なる値を取得selector.width()しています。その方法/理由を理解しようとしています。

擬似コード:

<div id="wrapper">
<ul>
<li>...</li>
</ul>
</div>

リスト項目の幅を と の間で切り替えるリンクが$('#wrapper').width()あり$(window).width()ます。多かれ少なかれ通常のビューからフルスクリーンへ、そしてその逆へ。#wrapperが固定幅 (例: ) の場合、width=500pxすべて問題ありません。

ただし、ラッパーが (たとえば) である場合、width:50%予期しない結果が得られます。最初.widthにページを表示したときは問題ありません (読み取り: 正しい)。つまり、前/次のコントロールなどが正しく整列します。フルスクリーンに切り替えてから通常の表示に戻ると、.width値は数ピクセル/数ピクセル少なくなります。width=X%を異なる値で試してみましたがX、違いが変わります。つまり、固定されていません。

パディングとマージンはゼロに設定されているので、それだけではないと思います。

また、$(window).resize(function()ウィンドウを少しだけ微調整すると、幅の読み取り値が自動的に修正されます。一番下の Firebug を開いても、それ自体が修正されます。

疑似コードがあいまいであることは理解しています。問題がどこにあるかを特定して修正できるようにする方法について、いくつかの考えと方向性を得たいと思っています。

4

2 に答える 2

0

まず最初に、ウィンドウ幅ではなく100％までリストを広げるラッパー要素にクラスを追加/削除するこの問題を解決することをお勧めします。

.fullscreen {
  width: 100%;
}

// on X event
$('#wrapper').addClass('fullscreen');
// on -X event
$('#wrapper').removeClass('fullscreen');

前の解決策に従わない場合...他の方法があります。この問題は、ボックスのサイズ設定に関連している可能性があります。つまり、jQueryは幅を1つと見なすことができ、ブラウザは別のことを考えることができます。この場合、$（'X'）。width（）の代わりに$（' X'）。outerWidth（）を使用する必要があると思います。

繰り返しますが、最初の解決策は問題ないはずです。

乾杯！

于 2012-07-23T17:24:16.890 に答える
0

jQuery の .width() は、計算された widthではなく CSS の幅を引き出します。これは、パディングや境界線などを考慮したものです。要素の実際の幅を取得するには、次を使用する必要があります。

document.getElementById('myElement').offsetWidth

結果の違いを示す例:http://jsfiddle.net/xixao/DNbqu/

于 2012-07-23T16:38:23.477 に答える