![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
いつもお世話になっております。
以下のサンプルスクリプトで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>
No.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)など、多数あります。
スタイルプロパティーというのをまるきり知りませんでした(^_^;)
回答を参考に自分でいじくってみて、少しずつ理解してます。
どうもありがとうございました。助かりました。
No.1
- 回答日時:
スクリプトを実行したんでも、動きを見たわけでも無いのですが、おそらく
innerText = X+","+Yで下の方の
<DIV ID="msxy"></DIV>
で宣言したDIVタグの中に座標を表示してます。innerTextって言うのがテキストって言うことで、そこに代入してるので表示だと思います。。
document.all["msxy"].style.left= X + 8;
document.all["msxy"].style.top = Y + 16;
同様に、DIVタグの座標を設定してます。つまり、XとY座標を設定することにより、マウスを追っかけます。
このスクリプトは、座標の数字がマウスポインタを追っかける物でしょうね?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
文字を一文字ずつ表示
-
FireFoxのjavascriptで自動でキ...
-
DOM要素を削除しても、イベント...
-
excle VBA とweb上の検索を利用...
-
jquery
-
onClickイベントの変更方法
-
Null またはオブジェクトではあ...
-
ラジオボタンをクリックしたい
-
javascriptの基本的なことだと...
-
JavaScript window.openで開く...
-
google apps scriptの終了のさせ方
-
<a>タグのテキストを取得
-
C#OpenCv V4にのエラーに関する...
-
C#テキストボックスの文字を配...
-
同じIDで定義した要素の配列を...
-
【正規表現】【javascript】CR...
-
idを使わずにonclickで自身の要...
-
functionから別のfunctionを実...
-
ActiveXobjectが作成できない
-
二次元配列を使って順位をだす...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
FireFoxのjavascriptで自動でキ...
-
Latexに関する質問です。
-
DOM要素を削除しても、イベント...
-
XMLでのAttributeを持ったNode...
-
TexでΣの添え字の位置直し
-
JavaScript window.openで開く...
-
Null またはオブジェクトではあ...
-
javascriptの基本的なことだと...
-
iframeのソースを取得したい
-
選択肢によってラジオボタンを...
-
excle VBA とweb上の検索を利用...
-
文字を一文字ずつ表示
-
ラジオボタンでreadonlyの切替え
-
responseTextについて
-
VBAのIE操作でframe構造のサイ...
-
サブウィンドウからのスタイル...
-
JavaScriptのdocument.all("変...
-
オンマウスについて
-
要素のリサイズをひろい、他の...
-
クリッカブルマップのリンク部...
おすすめ情報