- 締切済み
JavaScriptについて
下記の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>
- dyo
- お礼率1% (12/711)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- Ogre7077
- ベストアンサー率65% (170/258)
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';
- Ogre7077
- ベストアンサー率65% (170/258)
少々新しめの記述で良ければ <!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>
関連するQ&A
- 画面サイズを取得し、テーブルの高さ、幅を指定したい
以下のような方法で、画面に合わせたテーブルを作成したいのですが、 うまくいきません。 幅の変数を単にタグ属性の値にしても動かない事が判りました。 どのようにしたら、値をセットできるのでしょうか。 ご存知の型がおられましたら教えてください。 よろしくお願い致します。 <html> <head> <title>ウィンドウサイズを取得する</title> </head> <body> <script Language="JavaScript"><!-- w = window.outerWidth; h = window.outerHeight; // --></script> <table width="w" height="h"> <tr> <td> test </td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- 指定した要素を含んだテキストで取得する
<table> <tr id="aaa"><td>あああ</td></tr> <tr><td>いいい</td></tr> </table> <script> alert(document.getElementById("aaa").innerHTML) </script> 上記のようなHTMLを実行すると 「<td>あああ</td>」と表示されますが これをid指定されている<tr>要素を含んだ形で 即ち「<tr id="aaa"><td>あああ</td></tr>」というように 取得するにはどのような方法が考えられるでしょうか？
- ベストアンサー
- JavaScript
- javascriptによる計算
テキストボックス「a1～6」の値とテキストボックス「b1～6」に入力された値を足し算してテキストボックス「ｃ1～6」（例…c[i] = a[i] + b[i]）を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。 以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "＋"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>
- ベストアンサー
- JavaScript
- javascript のsyntaxについて
HTML文書でJavaScriptを使い、任意の数の<input type="text" .. > タグを表示させようとしています。 添付の写真の上の方にある"number of parts" の部分が、その任意の数を入れる所で、隣のボタンを押すと関数 "inputBox()" を呼ぶようにしてあります。 入力した任意の数だけwindow.document.write() で書かれた入力ボックスが出てくると思ったのですが、出てきません。 maxQty=window.document.getElementById("qty").value; によって取得した任意の数をforループで使っていますが、これが働いていないようです。 というのは、この文をコメントアウトして具体的な数を入れるとちゃんとその数だけの入力用の行が出てくるからです。 どう考えてもこの文に間違いはないように思われますが、どこがおかしいのか、どなたか教えてくださいませんでしょうか。 以下にソースコードをコピーします。 <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> makeBOMtables.html</title> <script type="text/javascript"> </script> </head> <body bgcolor="navy" style="font-size:16pt; color:yellow"> <center> <h3>company name</h3> <h2>Product BOM List making Program</h2> <form method="POST" action="makeBOMtables.php"> <table border="1"> <tr><td>product number</td> <td> description </td><td>number of parts</td><td></td></tr> <tr> <td><input type="text" size="16" style="font-size:16pt" id="prodNum" name="prodNumx"/></td> <td><input type="text" size="50" style="font-size:16pt" id="prodName" name="prodNamex" /></td> <td><input type="text" size="5" style="font-size:16pt" id="qty" name="qtyx"/></td> <td><input type="button" value="make BOM" onclick="inputBox()"></td> </tr> </table> </br> <script > var maxQty; function inputBox(){ window.document.write("<html><head></head><body bgcolor='navy' style='font-size:16pt; color:yellow'><center>"); window.document.write("<table border='1'>"); window.document.write("<tr> <th>item #</th><th>part number</th> <th>description </th><th>we need</th>"); window.document.write(" <th>we have</th> <th></br></th></tr>"); // table header maxQty=window.document.getElementById("qty").value; for (var count=1; count<=maxQty; count++){ window.document.write("<tr>"); window.document.write("<td><input type='text' size='5' style='font-size:12pt' id='item"+ count + "' name='itemx"+ count +"' value="+ count +" /></td>" ); window.document.write("<td><input type='text' size='16' style='font-size:12pt' id='partNum"+ count + "' name='partNumx"+ count +"' /></td>" ); window.document.write("<td><input type='text' size='50' style='font-size:12pt' id='partName"+ count + "' name='partNamex"+ count +"' /></td>" ); window.document.write("<td><input type='text' size='5' style='font-size:12pt' id='qtyN"+ count +"' name='qtyNx"+ count + "' /></td>" ); window.document.write("<td><input type='text' size='5' style='font-size:12pt' id='qtyH"+ count +"' name='qtyHx"+ count + "' /></td>" ); window.document.write("<td><input type='submit' value='end input'/> </td>"); window.document.write("</tr>"); }// end for window.document.write("</center></body></html>"); } </script> </form> </center> </body> </html> また、入力行が表示されるのは、なぜか別のページですが、これは今は気にしません。 詳しい方がいらっしゃいましたら、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- javascriptについて
<script type="text/javascript"> //ウィンドウサイズの取得 getWindowSize(); //ウィンドウサイズを取得する function getWindowSize() { ZZZ = window.innerWidth; AAA = ZZZ * 0.98; BBB = (ZZZ * 0.98) * 0.5625; } document.write("<div style='border:1px solid; width:" + AAA + "px; height:" + BBB + "px;'>幅" + AAA + " 縦" + BBB + " <p></p></div><p></p>"); </script> 上記のように＜DIV>にウィンドウサイズに合わせて幅と縦を指定しているのですが、 ブラウザのウィンドウサイズが変更されたときに、＜DIV>のサイズも変更させたいのですが、 どのように記述すれば良いでしょうか？
- ベストアンサー
- JavaScript
- JavaScriptの読み込み順
下記コードを実行すると、プルダウンメニューに値が入る前にボタンがクリックされてしまいます。 どのようなコードを書けば正常に動作するのでしょうか。 ■html内 <html> <head> <title>SCT</title> <script type="text/javascript"> onload = function() { var d = new Date() ; d.setTime((new Date).getTime()) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getFullYear()-1 ; document.getElementById('year').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getMonth()+1 ; document.getElementById('month').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getDate() ; document.getElementById('day').appendChild(newOption) ; } </script> <script type="text/javascript" language="JavaScript" src="./file.js"> </script> </head> <form NAME="Myfm" method="post" action="☆☆URL☆☆"> <body onLoad="yobi()"> <table border="0"> <tr> <td> <select name="startyear" id="year"> </select> </td> <td>年</td> <td> <select name="startmonth" id="month"> </select> </td> <td>月</td> <td> <select name="startday" id="day"> </select> </td> <td>日</td> </tr> <tr> <td> <select name="endyear"> <option value=201>2011 </select> </td> <td>年</td> <td> <select name="endmonth"> <option value=8>8 </select> </td> <td>月</td> <td> <select name="endday"> <option value=1>1 </select> </td> <td>日</td> </tr> <tr> <td><input type="submit" value="集計" NAME="mybut"> </td> </tr> </table> </body> </form> </html> ■file.js内 function yobi(){ document.Myfm.submit(); }
- ベストアンサー
- JavaScript
- PCプログラミング勉強始めました。
メモ帳に <metahttp-equiv="Content-Type"content="text/html;charet=utf8"/> <style type="text/css"> table{ border-collapse:collapse; } tabletd { width:20px; height:20px; border:1pxsolidblack; } </style> <scripttype="text/javascript"> window.onload=function(){ varhtml=['<table>'] html.push'<tr>') for(vari=0;i<<10;i++)html.push('<td></td>') html.push('<tr>') html.push('</table>') document.getElementByld('view7).innerHTML=html.join('') } </script> <devid="view"></div> <table> <tr><td></td><td></td></tr> <tr><td></td><td></td></tr> </table> と入力するとIEでは window.onload=function(){ varhtml=[''] html.push'') for(vari=0;i<<10;i++)html.push('') html.push('') html.push(' ') document.getElementByld('view7).innerHTML=html.join('') } と表示されます。 本には枠が表示されるとあるのですがうまくいきません。 解決をお願いします。
- ベストアンサー
- JavaScript
- JavaScriptについて
<div id="hoge" style="border:1px solid;"></div> <script type="text/javascript"> //ウィンドウサイズの取得 getWindowSize(); // リサイズイベントの設定 window.onresize = getWindowSize; //ウィンドウサイズを取得する function getWindowSize() { ZZZ = window.innerWidth; AAA = ZZZ * 0.98; BBB = (ZZZ * 0.98) * 0.5625; document.getElementById("hoge").style.width = AAA + "px"; document.getElementById("hoge").style.height = BBB + "px"; } </script> 上記のようにブラウザのサイズが変更されたら<DIV>のサイズも変更するようなスクリプトですが、 別のJavaScriptで<div id="hoge" >の中に埋め込み型のプレイヤーを表示しています。 この時にブラウザのサイズを変更してもプレイヤーのサイズが変更されません。 ブラウザのサイズを変更 → 更新ボタンを押すとプレイヤーのサイズも変更されます。 例えば、リサイズされたら最初から読み直す（更新ボタンと同じ動作）にする場合はどうしたら良いでしょうか？
- 締切済み
- JavaScript
- どのセルをクリックされたのか
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa テーブルのどのセルをクリックされたかを得る方法を教えてください。 例えば36をクリックされたら(1,1)という値が得られるfunc()です。 getElementedByIdを使わない方法を教えてください。 <td>の1つ1つにonClickを書けばやりたいことはできますが HTMLファイルのサイズを小さくするために別の方法を考えています。 <table border=1 onClick=func()> <tr><td>15<td>18 <tr><td>52<td>36 </table> <script> function func(c){ alert() } </script>
- 締切済み
- JavaScript
- Javascriptでテーブルタグの座標が知りたい（但し、マウスでなく）
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>JavaScriptテスト</title> <script type="text/javascript"> <!-- document.onmousedown = msDown //----------------------------------------------------------------------------- // マウスで座標を取得する //----------------------------------------------------------------------------- function msDown(){ var x = event.x; var y = event.y; alert('x=[' + x + '] y=[' + y + ']'); } // --> </script> </head> <body> テーブルタグの<TD>で左上側の画面上の位置の座標位置を取得したいです。 offsetLeftやoffsetTopでは、例えばテーブルタグの上側に<p>がある場合と無い場合でも同じ値でした。 正しく取得する方法はありますか？ <hr> <table cellspacing="0" cellpadding="2" border="1" bgcolor="black"> <tbody> <tr> <td><img src="" width="100" height="100"></td> <td bgcolor="red">この赤のエリアの左上の座標が知りたい（マウスイベントで調べられるが、それを使わずに調べたい） </td> </tr> <tr> <td>456</td> <td><img src="" width="50" hright="50"></td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
補足
回答ありがとうございます。 例えば、ウィンドウの高さ「window.innerHeight;」から -200した値を <table height=???>の ???に入れたいときはどうすれば良いのでしょうか？