JavaScriptについて

締切済

質問者：dyo
質問日時：2014/10/25 15:44
回答数：2件

下記の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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： Ogre7077
回答日時：2014/10/27 10:23

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';

- 0
- 件

通報する

No.1

回答者： Ogre7077
回答日時：2014/10/26 17:52

少々新しめの記述で良ければ

<!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>