JavaScriptでウィンドウサイズに合わせて要素のサイズを変更する方法
- JavaScriptを使用してウィンドウサイズに合わせて要素のサイズを変更する方法について詳しく解説します。
- 質問者は、ブラウザのウィンドウサイズが変更された際に、指定された要素のサイズも自動的に変更させたいという要望を持っています。
- 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>のサイズも変更させたいのですが、 どのように記述すれば良いでしょうか？
- dyo
- お礼率1% (12/711)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<div id="hoge" style="border:1px solid;">幅<span id="aaa"></span> 縦<span id="bbb"></span> <p></p></div><p></p> <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"; document.getElementById("aaa").innerHTML = AAA; document.getElementById("bbb").innerHTML = BBB; } </script>
関連するQ&A
- 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
- JavaScriptについて
JavaScriptを使って、画面の横幅を取得し、 縦幅＝横幅ｘ0.75 AAA=横幅 BBB=縦幅 <div style='width:AAApx; height:BBBpx;'></div> このようなスクリプトはどのように記述すれば良いでしょうか？
- 締切済み
- JavaScript
- この場合のCSSの記述を教えてください！
現在コーディング中なのですがIE6,7では問題ないのですが、Firefox,OPERA,netscapeにてずれて表示されてしまいます。 鯨飲がさっぱり分からない状態で・・どなたかお分かりになる方いましたらご教授願います（泣） ■html <div id="aaa"> <div id="bbb">コンテンツ</div> <div class="ccc">コンテンツ</div> </div> ■css #aaa { width: 640px; height: 300px; float: left; } #bbb { width: 640px; height: 150px; background-image: url(images/背景画像.gif); background-repeat: no-repeat; } .ccc { width: 640px; height: 150px; } ■状況 640px×300px（aaa）の枠の中に（bbb,cccを）収めたいのに300を超えて（bbbの上部に約100px程度のが出来る）表示されてしまう。 （bbbの背景画像サイズは640px×150px） ■いじってみて bbbに「border: 1px #000000 solid;」を追加するとスペースはなくなる。 以上が状況です。よろしくお願いいたします！
- 締切済み
- HTML
- JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。
JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。 例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。 ソースは以下になります。 前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css"> <!-- .AAA,.BBB,.CCC { width:200px; background-color:#ccc; margin:10px; display:none; } --> </style> <script language=javascript> <!-- function changeStyle(){ var query = window.location.search.substring(1); var search = query.split("&"); for (var i = 0; i < search.length; i++) { var XXX = search[i]; } var allElement = document.getElementsByTagName('*'); for (var j = 0; j < allElement.length; j++) { if (allElement[j].className=='XXX') { allElement[j].style.display = "block"; } } } --> </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>
- 締切済み
- JavaScript
- javascriptで2箇所のphpの関数を取得したいのです。
javascriptで2箇所のphpの関数を取得したいのです。 見よう見まねでやっている初心者です。よろしくお願いします。 javascriptにてphpの関数をよびだしてhtmlのinput type="text"に値を出力しようとしています。 ２か所のphp を下記のようにhtmlに書いて取得しようとしたのですがどちらか一方しか取得できません。 なんとか両方を読み込めるようにできないでしょうか？分かりにくい質問かと思いますので例を書いて見ましたのでどうかよろしくお願いいたします。 (例） <script type="text/javascript" src="../data/zzz.php?aaa=abc" ></script> <script type="text/javascript" src="../../../data/xxx.php?bbb=abc" ></script> 上記のように書いても片方しか取得しないようです。 以下../dataのzzz.phpのphｐです。 <?php $aaa = $_GET['aaa']; header("Content-type: application/x-javascript"); echo "window.onload = function () {"; if ($aaa== 'abb') {echo "document.getElementById(\"xxx\").value=100;","document.getElementById(\"yyy\").value=1;";} elseif ($aaa == 'abc') {echo "document.getElementById(\"tanka\").value=120;","document.getElementById(\"yyy\").value=2;";} echo "}"; ?> 以下../../../dataのxxx.phpのphｐです。（例） <?php $bbb = $_GET['bbb']; header("Content-type: application/x-javascript"); echo "window.onload = function () {"; if ($bbb== 'abb') {echo "document.getElementById(\"zzz\").value=50;","document.getElementById(\"vvv\").value=10;";} elseif ($bbb == 'abc') {echo "document.getElementById(\"tanka\").value=51;","document.getElementById(\"vvv\").value=20;";} echo "}"; ?> 以上２か所のディレクトリのphpを取得したいのですが、これはできない事なのでしょうか？ちがうディレクトリから取得しなければ更新作業が大変になってしまうのです。どうかよろしくお願いいたします。
- ベストアンサー
- PHP
- 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>
- 締切済み
- JavaScript
- css javascriptについて教えて下さい。
下記のように、ボタンを押すとdivタグの中にpタグを表示するようにしました。 そこで、そのpタグがdivタグの中央から表示するようにしたいのですが、できません。cssでpタグの左右のmarginをautoにするのかくらいしか思いつかず困っています。pタグがdivタグの中央から表示されるようにするにはどうしたらよいでしょうか。教えて下さい。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> <style> #w{ width:500px; height:50px; border : solid 1px; overflow: hidden; } p{ display:inline-block; width:50px; height:50px; margin-left:auto; margin-right:auto; } </style> <script type="text/javascript" language="javascript"> var count = 0; var box; window.onload = function() { box = document.getElementById("w"); } function btnClick(){ var pNode = document.createElement("p"); pNode.innerHTML = count; box.appendChild(pNode); count ++; } </script> </head> <body> <div id="w"></div> <button onClick="btnClick()">Ｐタグを生成</button> </body> </html>
- ベストアンサー
- HTML
- JavaScriptでブラウザの高さを取得する方法
Javascriptでブラウザの高さを取得し、その取得した高さから指定したpx(100px)を減算し<div height="x">に代入したいのですがどうすればいいでしょうか？ また、例えばブラウザのサイズが高さ1000pxだとして、そこから100px分減算し、<div height="900">となりページが表示された場合、表示された後にブラウザの高さ500pxに変更したらどういう挙動になるのでしょうか？更新するまで<div height="900">のままですか？それとも更新しなくても<div height="400">となり表示されますか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptでオブジェクトの重なりを判定
お世話になります。 javascriptを使用して、<div>で作られた複数のオブジェクトが重なったかどうかを判定したいのです。 果たして、そんなことは可能なのでしょうか。 <body> <div id="block1" style="background:#F00; width:200px; height:200px; marglin-left:200px;" onclick="javascript=aaa();"></div> <div id="block2" style="background:#0F0; width:200px; height:200px; margin-left:200px;"></div> <div id="block3" style="background:#0F0; width:200px; height:200px; margin-left:600px;"></div> <div id="block4" style="background:#0F0; width:200px; height:200px; margin-left:800px;"></div> <div id="block5" style="background:#0F0; width:200px; height:200px; margin-left:1200px;"></div> <div id="block6" style="background:#0F0; width:200px; height:200px; margin-left:2000px;"></div> </body> <script> fucntion aaa(){ var bbb = document.getElementById("block1"); var move= parseFloat(bbb.style.left); bbb.style.left = (move+10)+"px"; } </script> というのがあったとして、block1がblock2、block3・・・・のいずれかと重なった瞬間にalertか何かで「重なりました！」という感じで表示することはできないのでしょうか。javascript オブジェクト 重なり とかで検索しても、目的のものが出てこなかったので… どうぞ、よろしくお願い致します。
- ベストアンサー
- JavaScript
- 【javascript 文法】値渡し？参照渡し？
以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"><!-- var gDown= false; var div = document.createElement('div'); div.id = 'AAA'; div.innerHTML = 'AAA'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); var div = document.createElement('div'); div.id = 'BBB'; div.innerHTML = 'BBB'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); Event.observe(document, 'mouseup',function(){ alert(gDown.id); gDown=false; }); //--></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって 参照渡し？それとも値渡し？ と混乱しています。 この辺のところを、教えてください。お願いいたします。
- ベストアンサー
- JavaScript
お礼
ありがとうございました。 上手くできましたｍ