下記の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.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';
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=???>の
???に入れたいときはどうすれば良いのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- Visual Basic(VBA) Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- HTML・CSS 自身のHPにYouTube動画を貼り付けるのが出来なくなり困ってます 1 2022/11/11 10:44
- PHP htmlで複数の個数入力欄を表示させるには 1 2022/09/20 03:11
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
javascriptでクリックするごと...
-
javascriptで<table>背景色の取得
-
連動テーブルのクロスハイライト
-
JQueryでテーブルの行を追加し...
-
画像クリックでテーブル内背景...
-
縮小画像をマウスオーバーで画...
-
Tableの枠線(内・外)色を変更
-
selectのonChangeが動作しません
-
どこに挿入?
-
画面表示とともに、テーブルの...
-
セレクトボックスでそれ以降の...
-
フォーム内容を上から順番にJav...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
複数のselect値で1つも選択され...
-
プルダウンで選択すると、DBの...
-
テキストエリアに履歴を残したい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
テーブルの行数を可変長にした...
-
テキストエリアに入力した改行...
-
【jQuery】tableループ内のIDの...
-
idの振り直しについて
-
プルダウンメニューを表の中に...
-
javascriptで画像をテーブルに...
-
javascriptで<table>背景色の取得
-
javascriptでクリックするごと...
-
jquery にて、アラートダイアロ...
-
どこに挿入?
-
動的なcheckboxのcheckedについて
-
Javascriptでテーブルタグの座...
-
javascriptで画像の移動
-
クリックごとに文字色が交互に...
-
javascriptでスロットマシン
-
<iframe>内にHTMLをランダム表...
-
連動テーブルのクロスハイライト
おすすめ情報