JavaScriptで、現在表示中のページの内容の幅をピクセル単位で取得したいのですが、可能でしょうか?
ウインドウの幅ではなく、表示している内容の幅が欲しいのです。
document.body.clientWidth は、表示領域の幅のようでした。
document.body.scrollWidth も、表示領域の幅のようでした。
document.body.offsetWidth は、ウインドウの幅のようでした。
ブラウザのウインドウ幅に追従する「リキッド」なデザインの場合(教えて!gooもそうです)は、ブラウザのウインドウ幅に合わせて変化しますので、その幅が欲しいです。
Yahooのトップページはテーブルで幅を指定してあるようです。そのような場合はウインドウを最大化したりサイズを変えたりしても“内容”は変化しませんので、その幅を取得したいです。
どのようなプロパティにアクセスすれば良いでしょうか。
No.1ベストアンサー
- 回答日時:
教えて!gooの場合
<table cellspacing="0" cellpadding="0" width="100%" border="0">
Yahooのトップページの場合
<TABLE cellSpacing=0 cellPadding=2 width=710 bgColor=#eeeeee border=0>
です。
従って、
getElementsByTagName('table')[0].width
の内容を判断し、割合指定であれば
document.body.clientWidth
にその値を積算、定数指定であれば
そのまま値を採用すれば、一応の目的は果たせるかと思います。
ただし・・・
あくまでこの手法では「テーブルで画面整形をしている場合」に限られます。
ごく普通のテーブルで画面整形をしていないサイトであれば、その内部で使っているテーブルの幅が出てきてしましますし、使っていなければ、スクリプトエラーになってしまうでしょう。
さらには幅整形にdivエレメントを使っている場合には、別の手立てが必要になってきますし、
CSSでposition指定して特異な位置へフロートウインドウを表示していた場合には、もはやほとんどお手上げではないかと思います。
このあたり、全てに対処しようとするのなら、ほとんどHTML解析エキスパートシステムになってしまいます。
そもそも、他者の作成したサイトの「有効幅」を得ようという発想自体に問題があるように思われますが?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- 政治 私の発明した「二階建て漢字」は使えるでしょうか? 3 2023/02/08 16:40
- Excel(エクセル) [入力規則]のリストボックス内の“不揃いの林檎たち” 3 2022/09/15 18:32
- Excel(エクセル) 【エクセルマクロ】既に開いているIEの、サイズや表示位置を変更するには 4 2022/12/01 22:57
- Chrome(クローム) Google Chromeのブラウザ(PC)ウインドウの移動について 3 2022/07/19 15:14
- 爬虫類・両生類・昆虫 ヘラクレスオオカブトの幼虫の容器の適したサイズを教えてください 2 2022/07/24 04:11
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- 工学 3dB帯域幅と6dB帯域幅 4 2023/06/11 08:02
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
箇条書きリストのすぐ横に画像...
-
テーブルの横に画像を
-
HTMLでテーブルを横に並べる方法
-
<SPAN>で文字を右揃えにしたい...
-
テーブルの位置を細かく指定し...
-
table内にiframeでテーブルが崩...
-
スタイルシートでテーブル内背...
-
ホームページのテーブルに斜線...
-
テーブル内に画像を表示したい。
-
テーブルの横に文字を置くタグ
-
はじめて質問させていただきます。
-
colspanを動的に行う
-
テーブル入れ子にしたらNNでは...
-
【CSS】縦横スクロールテーブル...
-
テーブルの列幅の部分固定の仕...
-
インラインフレームの隣に画像...
-
html でのテキスト結合について
-
TABLEのセルの中の文字を行単位...
-
商品詳細を横並びに表示する方法
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルタグの中にdivを含めて...
-
テーブルの横に画像を
-
テーブルの位置を細かく指定し...
-
ウィンドウのサイズを変えても...
-
HTMLでテーブルを横に並べる方法
-
テーブル内に画像を表示したい。
-
ヘッダー固定のスクロールが可...
-
tableのheight指定が効かない
-
箇条書きリストのすぐ横に画像...
-
【CSS】縦横スクロールテーブル...
-
DWで、デザインビューに表示さ...
-
更新するとずれる?
-
複数のテーブルを無条件に中央...
-
2つのテーブルを左右に表示した...
-
一つのテーブル内の文字色だけ...
-
<SPAN>で文字を右揃えにしたい...
-
テーブルでスクロールを同期したい
-
画像の横にテーブルを。。。
-
スタイルシートで、画像の横に...
-
テーブルの高さ幅の固定方
おすすめ情報