質問

現在のブラウザの幅を取得するJavaScript関数を書こうとしています。

こんなのがありました。

console.log(document.body.offsetWidth);

しかし、bodyの幅が100%の場合、失敗してしまうという問題があります。

他に良い機能、または回避策はないでしょうか？

解決方法は？

2017年版アップデート

私のオリジナルの回答は2009年に書かれたものです。今でも有効ですが、2017年に向けて更新したいと思います。ブラウザはまだ異なる挙動をすることがあります。私は、jQueryチームがクロスブラウザの一貫性を維持するために素晴らしい仕事をしていることを信頼しています。しかし、ライブラリ全体を含める必要はありません。jQueryのソースでは、関連する部分が dimensions.js の 37 行目 . ここでは、これを抽出し、単体で動作するように修正します。

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

オリジナル回答

ブラウザによって動作が異なるため、まず値をテストし、正しい値を使用する必要があります。これを行う関数を以下に示します。

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

であり、高さについても同様です。

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

この2つをスクリプトで呼び出すには getWidth() または getHeight() . ブラウザのネイティブプロパティが何も定義されていない場合、以下のようになります。 undefined .