4

ここに画像の説明を入力してください

左右の現在の距離を取得することは可能ですか？全幅ではありません。

4

1 に答える 1

4

window.innerWidthスクロールバー（存在し、レンダリングされている場合）を含むブラウザウィンドウのビューポート幅を取得するために使用できます。

document.body.clientWidthスクロールバー、マージン、境界線、またはパディングを含まないものもあります。後者の3つは、リセットスタイルシートを使用する場合のように、margin:0; padding:0;境界線が設定されていない場合は関係ありません。bodyそれ以外の場合は、これらを補う必要があります。

ノート：

  • clientWidth、すべての主要なブラウザ（IE 5.5 +、FF3 +、Chrome、Opera、Safari）でサポートされているにもかかわらず、W3Cで定義されたことがないため、ブラウザのサポートは異なる場合があります。
  • window.innerWidthW3C仕様がありますが、IE<9ではサポートされていません。

これが両方を比較するフィドルです。

編集： IE <9ではサポートされていないため、と（古いIEの場合）をwindow.innerWidth組み合わせて使用​​するのがおそらく最良のアプローチです。innerWidthclientWidth

var viewportWidth = window.innerWidth || document.body.clientWidth;

また、clientWidthW3Cで標準化されていなくても、すべての主要なブラウザでサポートされているため、多くの人がclientWidthW3C標準の代わりに単独で使用するのに十分な信頼性があると感じていinnerWidthます。

ユースケースでスクロールバーを含めないことが重要な場合はclientWidth、最初の/唯一のオプションとして使用できます。

var viewportWidth = document.body.clientWidth; //no scrollbars included

上記を使用する場合は、body持っているmargin:0ことを確認してください。padding:0

于 2012-12-08T15:27:27.567 に答える