- ベストアンサー
JavaScriptでブラウザの高さを取得する方法
Javascriptでブラウザの高さを取得し、その取得した高さから指定したpx(100px)を減算し<div height="x">に代入したいのですがどうすればいいでしょうか？ また、例えばブラウザのサイズが高さ1000pxだとして、そこから100px分減算し、<div height="900">となりページが表示された場合、表示された後にブラウザの高さ500pxに変更したらどういう挙動になるのでしょうか？更新するまで<div height="900">のままですか？それとも更新しなくても<div height="400">となり表示されますか？ よろしくお願いします。
- kyfnaisyan011
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まず・・・、divにheight属性は存在しません。 <div height="900">という書き方はNGです。 CSSを利用してください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { background-color:#CCC; } </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script type="text/javascript"> $(function() { setDivSize(); $(window).resize(function(){ setDivSize(); }); }); function setDivSize() { var wh = $(window).height(); $("div").height(wh - 100); } </script> </head> <body> <div> </div> </body> </html>
関連する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について
<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 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
- ブラウザごとにCSS?
こんにちは。 HTMLとCSSを使ったホームページを作っています。 確認用のブラウザにSleipnirを使っています。 下のように記述し、ブラウザエンジンを切り替えて見たところ、それぞれ幅が違うことに気づきました。 幅が異なると、デザインもグチャグチャになってくるので、大変困っています。 これを回避、対処する方法を教えて欲しいです。 補足もなるべく早くさせてもらいます。 どうかよろしくお願いします。 <style type="text/css"> div{ border:solid #cccccc 1px; width:750px; margin:5px; } #all{ width:800px; height:auto; text-align:center; } #header{ height:200px; } #main{ height:auto !important; height:15em; min-height:15em; } #footer{ font-size:10px; height:2em; } </style> <div id="all"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> </div> </div>
- ベストアンサー
- 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が動作せず、 ブラウザサイズを変化させたときにのみ、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で、タグを書き出す方法
フレ－ムを使わずにスタイルシ－トでメニュ－を表示する領域を指定して、その領域内にメニュ－（目次）を表示したいのですが、一度で全てを書きかえられるようにJavaScriptを外部ファイルにしてメニュ－が表示出来るようにしたいと思います。 スタイルシ－トの部分では *{ font-size:12px; line-height;125%; } #menu{ padding-top:12px; padding-left:12px; position:absolute; top:110px; width:150px; background-color:#cc99cc } em{ font-style:normal; font-weight:400 } #ind1{ padding-left:12px } で、メニュ－を表示する領域等を決めています。 <body>～</body>の間では、 <div id="menu"> <script Language="JavaScript"> <!-- function exMenu(tName) { tMenu = document.all[tName].style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; } // --> </script> <a href="javaScript:exMenu('treeMenu1')">１</a><br> <div id="treeMenu1" style="display:none"> <a href="javaScript:exMenu('treeMenu2')"><em id="ind1">１－１</em></a><br> <div id="treeMenu2" style="display:none"> <a href="1-1-1.html"><em id="ind1">１－１－１</em></a><br> <a href="1-1-2.html"><em id="ind1">１－１－２</em></a><br> </div> </div> でメニュ－を表示するようにしています。 この<body>～</body>の間の部分を、 <div id="menu"> 外部ファイルのJavaScriptを呼び出すタグ </div> というようにして、外部ファイルのJavaScriptのみを書きかえるだけで全てのペ－ジのメニュ－が変えられるようにしたいと思います。 この場合の、 １：勝手に書いてくれる外部ファイルにするJavaScriptの記述のしかた ２．１を呼び出すタグの記述 を教えて下さい。
- ベストアンサー
- JavaScript
- JavaScriptについて
JavaScriptを使って、画面の横幅を取得し、 縦幅＝横幅ｘ0.75 AAA=横幅 BBB=縦幅 <div style='width:AAApx; height:BBBpx;'></div> このようなスクリプトはどのように記述すれば良いでしょうか？
- 締切済み
- JavaScript
- CSSのJavaScript参照
JavaScriptによって変数に代入された文字列をCSSで参照し、 指定した場所に表示したいのですが、変数名が表示され代入された文字列が表示されません。 ソース <html><head> <title>a</title> <style type="text/css"> <!-- .str{ top:100px; left:10px; position:absolute; }--> </style> </head> <body> <div class="str3">str();</div> //ここで変数strに代入されたaを表示したい <SCRIPT LANGUAGE="JavaScript"> str = "a"; str(){document.write(str);} </SCRIPT></body></html> 初心者のため、間違いが多々あると思いますがよろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScript無効時に
JavaScriptを無効にしている際、 <noscript></noscript>で、特定のメッセージを表示することができますが、<BODY>のすぐ下に以下のタグを入れても問題ないでしょうか？ IEでは自分の思い通り、JavaScriptが有効の時は普通にページを表示し、 無効のときはページが完全に表示しないようになったのですが・・。 よろしくお願いします。 --------------------------------------------------- <noscript> <div style="height:1px;overflow:hidden;position:relative;top:-1px;"> </noscript> ---------------------------------------------------
- ベストアンサー
- HTML
