- ベストアンサー
文字がマウスカーソルを追従するスクリプト
いつもお世話になっております。 以下のサンプルスクリプトでinnerText・style.left・style.topと書いてあるところがあるのですが、これはどういう意味なのでしょうか？ どなたかわかる方、教えてください。 お願いします。 <HTML> <HEAD> <TITLE>マウスポインタ座標表示</TITLE> <STYLE TYPE="text/css"> <!-- #msxy { position:absolute; top:0px; left:0px; width:48px; color:black; background-color:yellow; font-size:7pt; border-width:1px; border-size:1px; border-style:solid; } --></STYLE> <SCRIPT Language="JavaScript"> <!-- function displayMouseXY(evt) { var X = Y = 0; if (document.all) { X = event.x; Y = event.y; document.all["msxy"].innerText = X+","+Y; document.all["msxy"].style.left= X + 8; document.all["msxy"].style.top = Y + 16; } if (document.layers) { X = evt.x; Y = evt.y; with(document.layers["msxy"]) { document.open(); document.write("<SMALL>"+X+","+Y+"</SMALL>"); document.close(); left = X + 8; top = Y + 16; bgColor = "yellow"; } } } if (document.all) document.onmousemove = displayMouseXY; if (document.layers) { window.onmousemove = displayMouseXY; window.captureEvents(Event.MOUSEMOVE); } // --> </SCRIPT> </HEAD> <BODY BGCOLOR="white"> マウスポインタ座標表示<BR> <DIV ID="msxy"></DIV> </BODY> </HTML>
- bridgewood
- お礼率95% (334/349)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
innerTextはinnerHTMLとすると、下のNN用の、記述と全く同じ意味になりますね。 document.all["msxy"].innerText で、"msxy"というIDを持つレイヤーの中にある「文字列として」 X+","+Y を代入する。となりますね。HTMLとしてではなく、文字列として代入されます。HTMLとして代入したいときは、 document.all["msxy"].innerHTML としてやれば、HTMLとして代入できます。この場合は、 X+","+Y を "<FONT color=red><B>"+X+","+Y+"</B></FONT>" というように、HTMLとして代入することが出来ます。innerTextとinnerHTMLとを書き換えたりして、仕組みの違いを覚えておくと良いでしょう。 document.all["msxy"].style.left とはpussyfootのおっしゃる通りで、 "msxy"というIDを持つレイヤー の（スタイルプロパティーの中の）X座標という意味です。（スタイルプロパティーには、このほかにも、高さ（height)や幅（width)など、多数あります。
その他の回答 (1)
- pussyfoot
- ベストアンサー率28% (39/138)
スクリプトを実行したんでも、動きを見たわけでも無いのですが、おそらく innerText = X+","+Yで下の方の <DIV ID="msxy"></DIV> で宣言したＤＩＶタグの中に座標を表示してます。innerTextって言うのがテキストって言うことで、そこに代入してるので表示だと思います。。 document.all["msxy"].style.left= X + 8; document.all["msxy"].style.top = Y + 16; 同様に、ＤＩＶタグの座標を設定してます。つまり、ＸとＹ座標を設定することにより、マウスを追っかけます。 このスクリプトは、座標の数字がマウスポインタを追っかける物でしょうね？
お礼
意味がつかめてきました。 自分でいじくって、色々試してみます。 どうもありがとうございました。
お礼
スタイルプロパティーというのをまるきり知りませんでした(^_^;) 回答を参考に自分でいじくってみて、少しずつ理解してます。 どうもありがとうございました。助かりました。