- ベストアンサー
JavaScriptで要素が画面からはみ出していることを検出したい
<div id="text">文章</div> JavaScriptで上記のような<div>要素にinnerTextを設定して 文章を切り替えて表示させています。 設定する文章の長さによっては、<div>要素が画面からはみ出して 表示されてしまいます。 そのようなときは<div>要素の位置をずらすなりの処理をしようと 思っているのですが、<div>要素が画面からはみ出しているという ことはどのようにして検出するのでしょうか？ お願いいたします。
- nihon_no_samurai
- お礼率70% (315/444)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
innerTextってことはIEで良いですよね？ http://msdn2.microsoft.com/en-us/library/ms530302.aspx この図を見ながら状況に応じて適切なプロパティの値を参照して処理します。 例えばこんな感じですかね。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>.......</title> <style type="text/css"> html{ border:5px blue solid; } body{ border:5px red solid; } #test{ border:5px solid; padding:20px; background:#ddd; margin-left:100px; margin-top:200px; } </style> <script type="text/javascript"> <!-- window.onload = testFunc; window.onresize = testFunc; /*これは一番シンプルなパターンでスクロールバーの有無を見ています。*/ function testFunc(){ var e = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body; size();//何か書き出しているだけですから判定とは無関係です。 if(e.clientWidth < e.scrollWidth) alert('横スクロールバーが出ています'); if(e.clientHeight < e.scrollHeight) alert('縦スクロールバーが出ています'); } function size(){ var t = document.getElementById('test'); //t.innerHTML = table(document.documentElement); //t.innerHTML = table(document.body); t.innerHTML = table(t); } function table(e){ s = { "0":["offsetWidth","clientWidth","offsetLeft","scrollWidth","scrollLeft"], "1":["offsetHeight","clientHeight","offsetTop","scrollHeight","scrollTop"], "2":["width","marginLeft","marginRight","borderLeftWidth","borderRightWidth","paddingLeft","paddingRight"], "3":["height","marginTop","marginBottom","borderTopWidth","borderBottomWidth","paddingTop","paddingBottom"] } h = '<table border="1">'; h += (e.id) ? '<caption>' + e.id + '</caption>' : '<caption>' + e.tagName + '</caption>'; for(var i in s){ h += '<tr>'; for(var k = 0;k < s[i].length;k++){ if(e.currentStyle[s[i][k]]){ h += '<td>' + s[i][k] + '</td><td>' + e.currentStyle[s[i][k]] + '</td>'; }else{ h += '<td>' + s[i][k] + '</td><td>' + e[s[i][k]] + '</td>'; } } h += '</tr>' } return h; } //--> </script> </head> <body> <div id="test"> </div> </body> </html>
その他の回答 (1)
windowのwidthとdivのwidthを取り出す http://www.google.co.jp/search?q=javascript%20window%20%E5%B9%85&hl=ja&lr=lang_ja しかしwindowの幅はブラウザによって取り出し方が異なるのでそれは別途調べて欲しい
