こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

初心者で申し訳ないのですが・・・お願いします。

現在、javascriptの勉強中なのですが、どうしてもわからなくなってしまい今回投稿させてもらいました・・・

今回の質問の内容なのですが、
div要素のスタイルシートのクラス名の切り替えをjavascriptで行おうとおもっていたのですが、全然反応してくれないんです・・
ちなみにHTMLは以下の通りです。
---------html------------------
<script type="text/javascript" src="test.js"></script>
<body>
<div class="hare"></div>
<div class="hare"></div>
<div class="hare"></div>
<div class="hare"></div>
</body>
---------------------------

cssは
---------css------------------
css
.hare{ display:block; background:url(toumei.gif) no-repeat; width:300px; height:100px;}
.ame{ display:block; background:url(toumei2.gif) no-repeat; width:300px; height:100px;}
です。
---------------------------


スクリプトは以下のとおりです。
---------javascript(test.js)------------------

window.onload = function(){

var hai = document.getElementsByTagName("div");
for (var i=0; i<hai.length-1; i++){
hai.item(i).onmouseover = function(){
hai.item(i).className="ame";
}

hai.item(i).onmouseout = function(){
hai.item(i).className="hare";
}

}
}
---------------------------
選択したdiv要素にmouseoverしたらクラス名を変えて、
mouseoutしたらクラス名をもどす・・と、いたって単純なプログラムではあるんですが・・動いてくれません・・
(単純なプログラムも組めてないようじゃダメですよね・・)
う~~ん・・なぜでしょう・・

ご教授お願いいたします・・・

投稿日時 - 2009-02-19 16:15:39

QNo.4731226

すぐに回答ほしいです

質問者が選んだベストアンサー

単純な話、オブジェクト参照のやり方がおかしいです。
onmouseover(もしくはonmouseout)イベントを設定するにあたり
function内で自オブジェクトにアクセスするにはthisをつかいます。

window.onload = function(){
var hai = document.getElementsByTagName("div");
for (var i=0; i<hai.length; i++){
hai[i].onmouseover = function(){
this.className="ame";
}
hai[i].onmouseout = function(){
this.className="hare";
}
}
}

まぁ経験の問題ですから、ちょっとかじればすぐできるようになるでしょう

投稿日時 - 2009-02-19 18:39:27

お礼

ご回答いただきましてありがとうございます!
なるほど!「this」ですね!
動きました!ありがとうございます。

もう一つ伺ってもよろしいですか??すみません・・(汗)

以下の記述方法なんですが、
→hai.item(i)
→hai[i]
この二つの違いってなんですか?教えて頂いた方で試したら動いたのですが。。
なぜしょうか?わがままですみません。。

投稿日時 - 2009-02-19 19:36:24

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(5)

ANo.5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test</title>
<style type="text/css">
.hare{ background:#f00 url(toumei.gif) no-repeat; width:300px; height:100px;}
.ame{ background:#0f0 url(toumei2.gif) no-repeat; width:300px; height:100px;}
</style>
<body>
<div class="hare">a</div>
<div class="hare">b</div>
<div class="hare">c</div>
<div class="hare">d</div>

<script type="text/javascript">
var m;
document.onmouseover = function(evt) {
var o = evt ? evt.target : event.srcElement;
if (m) m.className = 'hare';
m=(o.className == 'hare')?(o.className='ame',o):'';
}
</script>
と書けば短いかな?

以下自分用の記録として
onloadやonmouseoverは上書きされるとそれまでのものが無効になる。
なのでイベントを追加する形で登録する。
追加したイベントの呼び出し関数の第一引数はeventが必ず入る。

onmouseoverなどのマウスイベントは、バブリングするので
個々にイベントを貼り付けず、親玉につけるだけで良い。
イベントがmouseoutしなくても、他にmouseoverした時点で
それはmouseoutしたことになるので、それをmに記憶させて利用。

他の回答を批判するつもりもないし、立場でもないが、
マウスイベントを数百個取り付けるとなるとどうなるか考えると・・・
と教わったので参考までに、ここに列挙。

自分でもよく理解できていないが、メモリーリークの問題も考えなくてはないらしい。

投稿日時 - 2009-02-21 19:51:43

ANo.4

>→hai.item(i)
>→hai[i]
>この二つの違い

たしか
hai[i]は配列に代入されたものを参照するとき
hai.item(i)はノードを参照するとき

投稿日時 - 2009-02-21 12:21:58

お礼

な~るほど~!
本当に勉強不足でご迷惑をおかけいたしました。。

やっとこれで悩みの種が解消されました!スッキリ!

本当に感謝です!
ありがとうございました!

投稿日時 - 2009-02-21 16:30:26

ANo.3

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>test</title>
<style type="text/css">
.hare{ background:#f00 url(toumei.gif) no-repeat; width:300px; height:100px;}
.ame{ background:#0f0 url(toumei2.gif) no-repeat; width:300px; height:100px;}
</style>
<body>
<div class="hare">a</div>
<div class="hare">b</div>
<div class="hare">c</div>
<div class="hare">d</div>

<script type="text/javascript">
//@cc_on;
//全角空白は半角空白かタブに変換の事
(function(){
/*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'load', function () {
 var m = null;
 document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'mouseover',
  function (evt) {
   var o = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
   if (m) m.className = 'hare';
   if (o.tagName == 'DIV' && o.className && o.className == 'hare' ) {
    o.className = 'ame';
    m = o;
   } else {
    m = null;
   }
  }
 , false)
}, false);
})();

</script>

投稿日時 - 2009-02-19 18:55:33

お礼

ご連絡が遅くなりましてもうしわけございません。。。
考え方次第でいろんなスクリプトが組めるんですねぇ!

僕なんかのためにありがとうございます!
勉強させていただきました!

投稿日時 - 2009-02-21 16:27:40

ANo.1

まず、
onmouseover = function(){...}
という書き方は通用するブラウザと通用しないブラウザがあると思います。IEやFxではダメでしょう?
IEのattachEventやFxのaddEventListenerを使ってはいかがでしょうか
この部分をかきかえてみたら動きました(下はIE用です)

function onfunc(ev){ev.srcElement.className="ame"}
function offfunc(ev){ev.srcElement.className="hare"}
window.onload = function(){
var hai = document.getElementsByTagName("div");
for (var i=0; i<hai.length; i++){
var obj=hai.item(i);
obj.attachEvent("onmouseover",onfunc);
obj.attachEvent("onmouseout",offfunc);
}}

投稿日時 - 2009-02-19 17:43:02

お礼

ご回答ありがとうございます!
へぇ~そうなんですか。。ブラウザによって対応していないことってあるんですね。まだまだ勉強不足ですみません。。。
教えて頂いた方法で試してみたところ動きました!

本当に助かりました!ありがとうございました!

投稿日時 - 2009-02-19 19:30:21

あなたにオススメの質問