8

スクロールバーを含む div (たとえば、overflow:auto の b/c) を指定すると、要素の正確な innerWidth を取得するにはどうすればよいですか? 私の例では: http://jsfiddle.net/forgetcolor/2J7NJ/ width と innerWidth は同じ幅を報告します。私が欲しい数は100未満でなければなりません。

HTML:

<div id='box1'>
<div id='box2'>
</div>
</div>
<p id="w"></p>
<p id="iw"></p>​

CSS:

#box1 { 
    width:100px;
    height:100px;
    overflow:auto;
}

#box2 {
    width:200px;
    height:200px;
    background-color:#aaa;
}

Javascript:

$('#w').text("width is: "+$('#box1').width());
$('#iw').text("inner width is: "+$('#box1').innerWidth());​

アップデート：

box2 div に大きな画像が含まれている場合にこれを機能させる必要があります (したがって、読み込みに 1 秒かかります)。以下のソリューションの 1 つ (Lukx') を統合した例を次に示します。これは機能しません: http://jsfiddle.net/forgetcolor/rZSCg/1/ 幅を計算する前に画像が読み込まれるのを待つ方法はありますか?

4

4 に答える 4

16

新しい DIV をコンテナに挿入することにより#box1、この DIV は使用可能な幅を取得し、その幅を読み取ると正しいと思われる値が返されます。

HTMLとCSSはどちらも変更なし

JSになる

var helperDiv = $('<div />');
$('#box1').append(helperDiv);

$('#iw').text("inner width is: " + helperDiv.width());
helperDiv.remove();​​​​​​​​​​​​​​​​​​​​​​​​​​​ // because we dont need it anymore, do we?

私はまた、私が何をしたかを見るためにあなたのフィドルをフォークしました: http://jsfiddle.net/xc9xQ/2/

したがって、関数でこの値を取得するには:

function widthWithoutScrollbar(selector) {
  var tempDiv = $("<div/>");
  $(selector).append(tempDiv);
  var elemwidth = tempDiv.width();
  tempDiv.remove();
  return elemwidth;
};

//Example
console.log($('#page').width());  // 1280
console.log(widthWithoutScrollbar('#page'));  // 1265
于 2012-05-21T21:29:24.327 に答える
11

あなたが何を探しているのか正確にはわかりませんが、id box1 の divscrollWidthまたはdiv のいずれかであると思います。clientWidth

どちらも JavaScript プロパティであり、取得するのに jQuery は必要ありませんが、次のように jQuery で取得できます$('#box1')[0]。これが行うことは、jQuery セレクターから最初の (ID を使用している場合のみ) DOM 要素を返すことだけです。

スクロール バーに関係なく、box1 のコンテンツの幅を調べたい場合は、おそらく$('#box1')[0].scrollWidth. box1内に表示されている使用可能な幅を探している場合は、 $('#box1')[0].clientWidth.

両方の動作を確認できるように、フィドルをフォークしました。http://jsfiddle.net/arosen/xp9hD/

于 2012-05-21T23:06:09.190 に答える
1

元のdivをコピーして別のdivを作成し、幅などを取得できます。次のようなものです:

var saveDiv = $('<div />').html($('#box2').html());

saveDiv.innerWidth は 0 になります

于 2012-05-21T21:10:00.093 に答える
0

プレーンな JavaScript で解決できる場合は、david walsh が説明している手法を使用できます: http://davidwalsh.name/detect-scrollbar-width

私はあなたのフィドルをフォークして実装しました: http://jsfiddle.net/jnaO/z9btp/

繰り返しますが、これは jQuery を使用しておらず、javascript のみを使用しています。

于 2012-05-21T21:46:33.080 に答える