- ベストアンサー
Operaで文書の高さを取得
Internet Explorer 4以降、Mozilla、Netscapeでは以下のコードで文書の高さを取得できます。 Operaで文書の高さを取得するにはどうしたらいいでしょうか？ 無理であれば<div id="hoge">aaa<br>bbb</div>と書かれている部分の高さを求めるコードでもいいです。 if (document.height) { h=document.height; } else { h=document.body.scrollHeight; }
- shirayukix
- お礼率85% (12/14)
- JavaScript
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 実際に数値が合っているか分からないですが以下の方法でそれらしい値は取れました(IE,Firefox,Operaでやってみました) なぜIEのみdocument.getElementById("main").clientHeightにすると値が０になるのかまだまだ未熟者で分かりませんでした（＞＜） 逆にOperaのみ↑にしてもいいです <script language="javascript"> <!-- function get() { var browserName=navigator.appName; if (browserName=="Microsoft Internet Explorer") h = document.body.clientHeight; else h=document.getElementById("main").clientHeight; document.getElementById("result").innerHTML = h; } //--> </script> <div id="main"> <input type="button" onClick="get()"> <div id="result"></div> a<br>b </div> ボタンをしたときの実行結果 【ブラウザ】－【result表示前】－【result表示後】 IE - 57 - 75 Opera - 51 - 67 Firefox - 60 - 80
その他の回答 (2)
- himajin100000
- ベストアンサー率54% (1660/3060)
あ、このコード理解するときはComputed Valueって何なのか理解しておくこと！ http://www.w3.org/TR/CSS21/cascade.html よりも http://www.w3.org/TR/xsl/#refinement の 説明の方がわかりやすいと思う。
- himajin100000
- ベストアンサー率54% (1660/3060)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <title>Q3216691 テストケース1</title> <script type="text/javascript"> //自信ないけど function hoge(){ alert(document.getComputedStyle(document.getElementById("fuga"),null).getPropertyValue("height")); } //とか・・・ //ただし、IEにはないので //currentstyleでもどうぞ //http://bmky.net/text/note/javascript-css.html </script> </head> <body> <p id="fuga" onclick="hoge();">あいうえ<br />おかき</p> </body> </html>
お礼
ありがとうございます。 いろいろな方法があるものですね。
関連するQ&A
- 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
- Apend前のElementの中のElement
var div = document.createElement('div'); div.innerHTML="hogehoge<div id='hoge'>aaa</div>"; とし、 このdivの中のelementをID指定で取得したいです。 document.body.appendChild(div); とした後なら、 document.getElementById('hoge') で取得できるのですが、 appendChildしたくないです。 ご名案ありましたら、ご教授ください。宜しくお願いいたします。
- ベストアンサー
- 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
- 表示/非表示の切り替え
AAA、BBB、CCCの３つが縦に並んでいるとします。 ここで、あるボタンをクリックすると、BBBが消えるようにしたいです。 JavaScriptを使用して、以下のようなものを作ってみましたが、これだと、BBBが消えたスペースが空白として残ってしまいます。 スペースを残さずに、AAAとCCCを詰めて表示させたいのですが、何か方法はありますでしょうか？ ====================================================================== <html> <body> <SCRIPT LANGUAGE='JavaScript'> <!-- function showLAYER(idName){ document.getElementById(idName).style.visibility = 'visible' } function hiddenLAYER(idName){ document.getElementById(idName).style.visibility = 'hidden' } //--> </SCRIPT> <A HREF="javascript:showLAYER('layer1')">[表示]</A> <A HREF="javascript:hiddenLAYER('layer1')">[非表示]</A> <br><br> AAA<br> <DIV ID = "layer1" > BBB </DIV> CCC<br> </body> </html> ======================================================================
- ベストアンサー
- JavaScript
- SafariのIframeで高さが取得できません
<script language="JavaScript"> <!-- function frame_check(){ if(main.document.body){ if(navigator.userAgent.indexOf("Opera") != -1){ // 文字列に「Opera」が含まれている場合 var f = main.document.body.scrollHeight; } else if(navigator.userAgent.indexOf("MSIE") != -1){ // 文字列に「MSIE」が含まれている場合 var f = main.document.body.scrollHeight; } else if(navigator.userAgent.indexOf("Firefox") != -1){ // 文字列に「Firefox」が含まれている場合 var f = main.document.body.offsetHeight; } else if(navigator.userAgent.indexOf("Netscape") != -1){ // 文字列に「Netscape」が含まれている場合 var f = main.document.body.offsetHeight; } else if(navigator.userAgent.indexOf("Safari") != -1){ // 文字列に「Safari」が含まれている場合 var f = main.documentElement.offsetHeight; } if(f) document.getElementById("frame_set").height=f+20; setTimeout("frame_check()",100); }else{ setTimeout("frame_check()",100); } } setTimeout("frame_check()",10); --></script> <iframe name="main" id="frame_set" src="mainf.html" width="800" height="4000" frameborder="0" scrolling="no"></iframe> 上記のスクリプトを作成しましたが、IE7、 Firefoxではうまくいきますが、SafariではIframeに表示するページの高さが取得できません。 どこが問題なのかご教授お願いいたします。
- 締切済み
- JavaScript
- CSSでDIV IDをつかった行間設定
css div#hoge { line-height: 200%; } hoge.html <body> <div id="hoge"> あいうえお<BR> かきくけこ<BR> </div> </body> 上記にてやってみると行間が２００％になってくれません。行間を２００％にするにはどうすればいいですか。 おしえてください ぐー！
- ベストアンサー
- HTML
- preg_match_all 複数の文字列を取得
preg_match_all で複数の文字列を取得したい。 正規表現について勉強している者です。 preg_match_allを使って複数の文字列を取得したいのですが、 パターンの書き方に苦戦しています。 取得したいデータは以下の５つです。 一つずつであれば、どのデータも問題なく取得できますが、 ２つ以上組み合わせると、抽出した結果に余計な文字が入ったり、 何も結果を返さなかったりとなってしまいます。 皆様お知恵を貸してください。よろしくおねがいします。 ///////////取得したいデータ/////////// １つめ→○△□○△□○日本語や英語や数字△□○△□○△□○△□ ２つめ→2010/03/04(日) 16:33:48.21 ３つめ→Reg1046H2556USAsantaclala ４つめ→score995 ５つめ→●▲■<br> ●▲■●日本語や英語や数字▲■●▲■●<br> ▲■●▲■●▲■●▲■●<br> ▲■●▲■●▲■ ５つめには改行が入ることもあります。 /////////////////////////////////////// HTMLコード↓ <div class="cell" material="\1"></div></div> ： <span style="grey"><b>○△□○△□○△□○△□○△□○△□</span></b> DATE 2010/03/04(日) 16:33:48.21 <div class="gj"><a href="www.hoge.com" class="Reg1046H2556USAsantaclala"><span class="well">domestic</span></a><div class="hollywater" name="BUFFALO"></div></div>bridge</div><div id="score995">●▲■<br> ●▲■●▲■●▲■●<br> ▲■●▲■●▲■●▲■●<br> ▲■●▲■●▲■</div>
- 締切済み
- PHP
- 連番のMin, Maxを取得したい
連番のMin, Maxを取得したい 下記のデータが格納されたテーブルで、 部署コードのまとまりごとに、連番のMin, Maxを取得したいと 考えています。 SQLで、期待する結果を取得したいのですが、 なかなかよい案がなく、困っております。 何かよいアイデアがあれば、ご教授頂きたいと思い、質問致しました。 対象DBは、 SQLServer2008 Standard Editionです。 検索するテーブル RENBAN BUSYO_CD ---------------------------------------- 1 AAA 2 AAA 3 AAA 4 AAA 11 BBB 12 BBB 13 BBB 21 AAA 22 AAA 23 AAA 24 AAA ---------------------------------------- 期待する結果 BUSYO_CD RENBAN_MIN RENBAN_MAX -------------------------------------------------------------- AAA 1 4 BBB 11 13 AAA 21 24 -------------------------------------------------------------- ※データは、あらかじめ連番(昇順)でソートされています ※連番は、部署コードが同じ間は、続き番号となっていますが、 部署コードが変わると、続き番号にならない可能性があります。 ※同じ部署コードのまとまりが、複数回出てくることがあります。 （上記例でいえば、連番１～４のAAAと、21～24のAAAは同じ部署コードです） よろしくお願い致します。
- 締切済み
- SQL Server
- DIVの高さをかっこよく変える方法
皆さん、教えてください ボタンを押すとDIVの高さを、動的に大きくするjavascriptを構築しています ですが初めにサイズを指定しないで、なおかつDIVを表示しないページなので、 どうしても初めにDIVを一瞬でも表示しなければなりません それを解決させる方法はありますでしょうか 皆さんのお知恵をお貸しください ソースコード <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>高さを変えるサンプル</title> <script TYPE="text/javascript"> <!-- var max = 0; var hmove = 0; function init(){ max = document.all("height1").offsetHeight document.all("height1").style.display = "none"; } function Height(){ document.all("height1").style.display = "block"; htime = setTimeout("Height()", 30); document.getElementById("height1").style.height = hmove * 3 + "px"; hmove++; if((hmove * 3) >= max){ hmove = 0; clearTimeout(htime); } } //--> </script> </head> <body onload="init()"> <a href='javascript:onClick=Height();'>ここ</A> <div id="height1" style="background:red;overflow:hidden;"> 1<br> 2<br> 3<br> 4<br> 5<br> 6<br> 7<br> 8<br> 9<br> 10<br> </div> </body> </html>
- 締切済み
- 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
お礼
ありがとうございます。 NetscapeでclientHeightを使えないことと、 clientHeightでなくscrollHeightを取得する必要がありましたので、 こんなコードになりました。 if (document.height) { // N6 h=document.height; } else if (document.getElementById) { a=document.getElementById('data'); if (a&&a.scrollHeight) { h=a.scrollHeight; } }