• 締切済み

JavaScriptについて

JavaScriptを使って、画面の横幅を取得し、 縦幅＝横幅ｘ0.75 AAA=横幅 BBB=縦幅 <div style='width:AAApx; height:BBBpx;'></div> このようなスクリプトはどのように記述すれば良いでしょうか？

  • dyo
  • お礼率1% (12/711)

みんなの回答

  • t_ohta
  • ベストアンサー率38% (5085/13292)
回答No.2

＞　ブラウザ画面のサイズが変更された場合はどのようにすれば良いでしょうか？ <div id="hoge"></div> <script> setSizeHoge(); window.onresize = setSizeHoge; function setSizeHoge () { AAA = window.innerWidth; BBB = AAA * 0.75; document.getElementById("hoge").style.width = AAA + "px"; document.getElementById("hoge").style.height = BBB + "px"; } </script>

  • t_ohta
  • ベストアンサー率38% (5085/13292)
回答No.1

画面の横幅が「ディスプレイの横幅」なら <script> AAA = window.parent.screen.width; BBB = AAA * 0.75; document.write("<div style='width:" + AAA + "px; height:" + BBB + "px;'></div>"); </script> 画面の横幅が「ブラウザの表示領域の横幅」なら <script> AAA = window.innerWidth; BBB = AAA * 0.75; document.write("<div style='width:" + AAA + "px; height:" + BBB + "px;'></div>"); </script>

dyo
質問者

補足

回答ありがとうございました。 追加ですみません。 ブラウザ画面のサイズが変更された場合はどのようにすれば良いでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 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について

    <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を使用して、<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で特定のオブジェクトのCSSの書換え

    javascriptでCSSの書換えをしたいと思っているのですが、うまくいきません。 例えば、 <div class="aaa" style="z-index:0;">aaa</div> <div class="aaa" style="z-index:1;">bbb</div> <div class="aaa" style="z-index:2;">ccc</div> <div class="aaa" style="z-index:3;">ddd</div> <div class="bbb">111</div> <div class="bbb">222</div> <div class="bbb">333</div> このようにあったときに、≪z-indexの要素が1以上≫のclass="aaa"のオブジェクトを探して、該当するものの≪z-indexの値から-1する≫というような関数を作りたいのですが、ループの記述で困っています。 （prototype.jsを使うので、getElementsByClassNameは使えます。） 詳しい方、ご教授いただければ幸いです。

  • javascript　cssの値を取得、変更

    タイトルの通りですが、javascriptにてcssの値を取得することはできますでしょうか？ 考えている機能は、URLを指定するtextboxがあり、そこに入力したURLのボックスを解釈し、分解してmarginやpadding、border、width、height、合計縦幅、合計横幅…といった情報を出してくれる。その際できればcssで指定のないものも表示したい。いらない要素は破棄。 例： <html><style type="text/css"> #wrap{ width:250px; height:300px; margin:5px 10px; padding:10px 5px; } #hoge{ width:250px; height:50px; border:5px solid; } #moge{ width:100px; height:150px; margin:5px 10px; padding:10px 5px; } </style> <body> <div id="wrap"> <div id="hoge"> <ul> <li>aaa</li><li>bbb</li> </ul> </div> <div id="moge"> <img src="dammy1.gif" /> <img src="dammy2.gif" /> </div></div> </body></html> 適当ですけど、こんな感じだったら、 <html><style type="text/css"> #wrap{ background:#333; width:250px; height:300px; } #hoge{ background:#666; width:250px; height:50px;} #moge{ background:#999; width:100px; height:150px; } </style> <body> id名<br /> #wrap<br /> #hoge<br /> #moge<br /> … <div id="wrap"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="hoge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> <div id="moge"> width=<br /> height=<br /> margin-top=<br /> margin-right=<br /> … </div> </body></html> こんな感じにして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>

  • CSSで記述した数値が取得できない

    あるdivタグのサイズを640px*480pxにしようと思い、以下のように記述しました。 （省略） <style type="text/css"> <!-- #oshiete { width: 640px; height: 480px; } //--> </style> </head> <body> <div id="oshiete"></div> （省略） その後、これをJavaScriptで動的に変化させようとしたのですが、 document.getElementById("oshiete").style.width などでの数値の取得が出来ません。 調べてみたところ、divタグに <div id="oshiete" style="width: 640px; height: 480px;"></div> と直接スタイルを記述していれば数値の取得が出来ました。 しかしスタイルシートを使う以上、タグに直接スタイルを書いていたのではせっかくの効果が発揮できません。 スタイルシートをheadタグに記述、あるいは外部CSS呼び出しを使いつつ、JavaScriptから数値を取得する方法を教えてください。 よろしくお願いします。

  • 読み込み直後からjavascriptを適用させたい

    閲覧いただき、ありがとうございます。 先に質問をさせていただきましたが、根本的な部分について、解決に至っておりませんでしたため、 恐縮ですが、今一度お知恵をお借りさせていただきたいと思います。 タイトルに記述してありますが、ページを開いた直後はjavascriptが動作せず、 ブラウザサイズを変化させたときにのみ、javascriptが動作します。 これを、ブラウザを開いた直後から適用させたいのですが、 この記述ではリサイズ時に実行するようになっています。 かと言って、$(window).onloadを別途作成しても動作してくれません。 onload時にまず処理をし、リサイズ時に処理をさせるためには、 どのように書き換えれば良いのでしょうか。 if文で動作させるjavascriptを分ければ良いかとも思いますが、 ではonload時に書くべきjavascriptが考え付きません。 なにとぞご教示いただけますよう、お願い申し上げます。 以下情報 プログレッシブエンハンスメントのため、まずはモダンブラウザのみ対象。 文字数制限のため、最小状態に編集。 <script type="text/javascript"> $(window).resize(function(){ var h = $(window).height(); var w = h * 1.5; //alert('縦幅' + h + 'なら横幅は' + w + 'pxになります'); var bodyW = document.getElementsByTagName('body'); var bW = bodyW.item(0); bW.style.width = w + 'px'; var contentBox = document.getElementById('content-box');//別のjs適用の都合による分離 contentBox.style.width = w + 'px'; }); </script> </head> <body> <div id="hdr"> </div> <div id="content-box"> </div> <div id="ftr"> </div> </body> </html> CSS body { min-width: 1024px; margin: 0 auto; position: relative; } div#hdr {/*下段に表示*/ position: absolute; top: 580px; left: 0; background: #ffffff; width: 100%; height: 100px; z-index: 100; background: #dff; } div#content-box {/*中段に表示*/ position: relative;/*別のjs用。できれば削除したいが、削除すると動作しないので現状維持。*/ position: absolute; top: 20px; left: 0; min-width: 1024px; height: 560px; overflow: hidden; } div#ftr {/*上段に表示*/ position: absolute; top: 0; left: 0; background: #fdf; height: 20px; width: 100%; }

  • javascriptで困っています。教えてください

    javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に移動させたいのですが、上手くいきません。教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = 50; 　　　　} var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = 200; } </script> </body> </html>

  • javascriptで困っています。教えてください

    javascriptでimgタグの位置を変更しようと考えています。上、下の表示（divタグ）をクリックして上下に10pxずつ移動させたいのですが、どのようにしていいのかよく分かりません。 document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; の部分に無理があるのでしょうか？ 教えていただきたいと思い、投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=480"> <style type="text/css"> <!-- #wrapper{ width:640px; height:480px; position:relative; } #kt{ width:250px; height:250px; position:absolute; top:100px; left:100px; } #up{position:absolute; z-index: 1;top:0px;width:20px;height:20px;background-color:#F00;} #down{position:absolute; z-index: 2;top:30px;width:20px;height:20px;background-color:#F00;} --> </style> </head> <body> <div id="wrapper"> <div id="up">上</div> <div id="down">下</div> <img id="kt" src="kt.png"> </div> <script type="text/javascript"> var up_element = document.getElementById("up"); up_element.addEventListener("click", touchUp, false); function touchUp() { document.getElementById("kt").style.top = document.getElementById("kt").style.top-10; 　　　　} var down_element = document.getElementById("down"); down_element.addEventListener("click", touchDown, false); function touchDown() { document.getElementById("kt").style.top = document.getElementById("kt").style.top+10; } </script> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する