- 締切済み
表示サイズの変更イベントを取得できるか
テキストボックスのクリックイベントでそのテキストボックスの隣に<div>要素を表示しています。マウスホイールやメニューなどで表示サイズを変える（IEなら「表示」→「文字のサイズ」です）と、文書全体がズームするのにこのdiv要素だけがもとの配置で取り残されてしまいます。 表示サイズが変わったことをあらわすイベントがあればそのイベントで再配置すればよいと考えたのですが、そのようなイベントはあるのでしょうか。 あるいは他にうまいやり方があれば教えてください。
- kztk
- お礼率81% (9/11)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- Blaise
- ベストアンサー率33% (13/39)
回答No.1
うーん。そこで何がどんな風に起こっているのか、よく つかめません。 推測ですが、その情況の変化を取得するような「イベント」はないような気がしますね。 でも、なければ作ればよいわけです。 文字のサイズをウォッチして、それがある大きさを超えた ら報告するようにすればいいわけですよね。 それなら、こんな感じのでどうなのでしょうか。 <html> <head> <script type=text/javascript> var i=5 function FtWatch(){ var obj=document.getElementById('fn'); if(i>20)alert('Watch the chars now!'); obj.style.fontSize=i +'px' i++; setTimeout('FtWatch()',500); } </script> </head> <body onload="FtWatch()"> <div id="fn">AAA</div> </body> </html>
補足
回答ありがとうございます。 やはり最終的にはそうなりますか・・・。 やりたいことをできるだけ単純化したサンプルを書いてみました。テキストをクリックするとdiv要素がちょうどテキストボックスの右端に入るように現れますが、この状態で表示サイズを変更すると、div要素の配置が崩れてしまいます。クリックすれば再度期待通りの位置に配置されなおしますが、イベント云々ではなくそもそもスマートな書き方があるのかな、とも思っているところです。 ------------------------------------------------- <html> <head> <script language="Javascript"> var foo = null; function bodyOnLoad(){ foo = document.createElement("div"); foo.innerHTML = "A"; foo.style.backgroundColor = "gray"; foo.style.display = "none"; foo.style.position = "absolute"; document.body.appendChild(foo); } function txtOnClick(element){ var elementPosition = getElementPosition(element); foo.style.height = (element.offsetHeight - 2) + "px"; foo.style.width = (16-1) + "px"; foo.style.left = (elementPosition.x + element.offsetWidth - 16) + 'px'; foo.style.top = (elementPosition.y + 1) + 'px'; foo.style.overflow = "hidden"; foo.style.display = "block"; element.onmousedown = function(){foo.style.display="block";}; } function getElementPosition(element) { var position = new Object(); position.x = element.offsetLeft; position.y = element.offsetTop; while(element.offsetParent) { element = element.offsetParent; position.x += element.offsetLeft; position.y += element.offsetTop; } return position; } </script> </head> <body onload="bodyOnLoad();"> item1:<input type="text" id="txt1" onclick="txtOnClick(this);"><br> item2:<input type="text" id="txt2" onclick="txtOnClick(this);"><br> item3:<input type="text" id="txt3" onclick="txtOnClick(this);"><br> </body> </html>