下記のJavaScriptでウィンドウサイズを取得し、
その値に応じてTableサイズを変化させるhtmlを作成したいのですが、
どうすれば良いですか?
※下のスクリプトから???部分に値を入れたい。
<table width=??? height=??? border=1>
<tr><td></tr></td>
</table>
//ウィンドウサイズを取得する
function getWindowSize() {
var sW,sH,s;
sW = window.innerWidth;
sH = window.innerHeight;
s = "横幅 = " + sW + " / 高さ = " + sH;
document.getElementById("WinSize").innerHTML = s;
}
</script>
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
少々新しめの記述で良ければ
<!DOCTYPE html>
<script>(function(){
var f = function(ev){
var w = document.documentElement.clientWidth; // TODO 要検証
var h = document.documentElement.clientHeight;
[].forEach.call(document.querySelectorAll('*.widely'), function(e){
e.style.height = h + "px";
e.style.width = w + "px";
});
};
addEventListener('DOMContentLoaded', f, false);
addEventListener('resize', f, false);
})()</script>
<style>
body { padding:0; margin:0; } /* 下手にスクロールバーを出さないため */
</style>
<table border class=widely>
<tr><td>信長<td>是れは謀叛か、如何なる者の企てぞ
<tr><td>森乱<td>明智が者と見え申し候
<tr><td>信長<td>是非に及ばず
</table>
この回答への補足
回答ありがとうございます。
例えば、ウィンドウの高さ「window.innerHeight;」から
-200した値を
<table height=???>の
???に入れたいときはどうすれば良いのでしょうか?
No.2
- 回答日時:
No.1 の補足に対して
> window.innerHeight
innerHeight というのは、スクロールバー等も含めた高さなので、
表示領域の高さを求めるなら document.documentElement.clientHeight が望ましいです。
ただかなり古いブラウザにて動かない問題もあるので、扱いは慎重に
> -200した値を <table height=???> の
var n = window.innerHeight - 200;
document.getElementById("WinSize").setAttribute('height', ''+n);
ですが、height 属性は使うべきでない、というのが最近の流行ですので、
何か特殊な事情があるのでなければ style の使用をオススメします。
document.getElementById("WinSize").style.height = n + 'px';
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cancelBubble
-
テーブルの行数を可変長にした...
-
ラジオボタンの選択で解答・点...
-
tableの任意行にfocusをあてる
-
クリックされた罫表セルの行番...
-
全てのselect要素をデフォルト...
-
プルダウン 項目が多いので先頭...
-
一覧から選択した行の行番号を...
-
submitするとなぜか2度実行する
-
自動的に連番生成したURLにリン...
-
ドロップダウンリストの値の足...
-
チェックボックス付きのテーブ...
-
チェックボックスにチェックが...
-
複数のプルダウンメニューの表...
-
変数の宣言?
-
リンク先にまで色変更されたま...
-
セレクトボタンで特定の項目で...
-
新規ウインドウから他のページ...
-
クリックさせたいが、click()が...
-
テーブルのサイズを変更するこ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
selectのonChangeが動作しません
-
画面表示とともに、テーブルの...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
<iframe>内にHTMLをランダム表...
-
javascriptで画像をテーブルに...
-
WEB制作に関する質問です。コン...
-
javascript でテーブル操作
-
カレンダーに印を付けたい
-
日にち指定によるテーブル/行の...
-
テーブルのtdの中に、重複避け...
-
innerHTMLでのテーブル作成
-
プルダウンメニューを表の中に...
-
簡単なJavaスロットマシーンに...
-
javascriptで表に画像を貼る
-
javascriptで画像の移動
おすすめ情報