2009-08-17 21 views
3

は私がonmouseover属性とれるonmouseoutそれのクラスを変更するHTMLのスパンを持っている:Javascriptを使用してonmouseoverイベントを変更するにはどうすればよいですか?

私はonmouseover属性と他の場所ページで呼び出されるJavaScript関数を使用してイベントONMOUSEOUTを有効にして(変化する)を無効にすることができるようにしたい
<span id="someSpan" class="static" onmouseover="this.className='active'" onmouseout="this.className='static'">Some Text</span> 

。これは可能ですか?

答えて

2

document.getElementById('someSpan').onmouseover = 
    function() { 
     this.className='newactive'; 
    }; 
+0

ありがとうございます。私はこの回答とJason'sを受け入れたいと思います。これは私のプロトタイプに必要なように動作しますが、後でJQueryを使用してこれを行う方法を見ていきます。 – Trastle

1

安全な方法は、PrototypeやJQueryのようなJavascriptツールキットを使用することです。

これらはすべてこのようなことを簡単に実行できますが、クロスブラウザで動作します。例えば、here is how you do it in JQuery

0

コード:

document.getElementById("someSpan").onmouseover = function() 
{ 
    //New code 
};//Do not forget the semicolon 
1

私はjQueryのは容易になるだろう同意するだろうが、あなたはJavaScriptに固執したいならば、私はこれは動作するはずと信じて:

のdocument.getElementById( "ELEMENTID ").onMouseOut = functionName;

さらに、jQueryのサイズは約20Kbです(プロダクションフレームワークファイルのサイズ)ので、ページの読み込みが遅くなる可能性があります。あなたがJavaScriptで行うことができるいくつかの事柄のためにそれを使っているだけなら、何かを考えてみてください。

1

はい、あなたは、単にonmouseover属性に割り当てることで、スパンのための要素インスタンスのプロパティONMOUSEOUTそれを行うことができます。例:

// Define your handler somewhere 
function myNewHandler() 
{ 
    // ...new logic... 
} 

// And where you want to swap it in: 
document.getElementById('someSpan').onmouseover = myNewHandler; 

...しかし、これを行うのはかなり昔ながらの方法でありますこの。より現代的なアプローチでは、イベントハンドラをフックアップするために、addEventListenerまたはattachEvent(標準またはIEを実行しているかどうかによって異なります)を使用します。 Prototype、jQueryなどのライブラリや他の十数人の人が役に立ちます。

関連する問題