- 締切済み
特定のクラスのバック地をマウスオーバーで色替えする方法
クラス名がついたJavascriptでマウスオーバー時のバック地の色を変更する方法をさがしています。 現在、タグに対するマウスオーバー時のバック地の色替え方法は分かっいます。 ******************************************************************** window.onload = function(){ //登録フォームのテーブル(td)の色を変化させる var tdTag = document.getElementsByTagName(\'td\'); for (var i=0; i<tdTag.length; i++){ tdTag[i].onmouseover = function(){ this.style.backgroundColor = \'#f8f8f8\'; } tdTag[i].onmouseout = function(){ this.style.backgroundColor = \'\' } } } ************************************************************** 上記は[ td ]タグに対する色替えで、テーブルのtdタグ全てに反映されてしまいますが これをクラス名もしくはid名がついたもののみに反映させたいのです。 初心者でやり方が分からなかったのでご質問させていただきました。 宜しくお願いいたします。
- nonchan000
- お礼率53% (35/66)
- JavaScript
- 回答数4
- ありがとう数8
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- cyokodog
- ベストアンサー率56% (13/23)
汎用性や再利用性を考慮するなら、以下のように別ルーチン化したほうが良いかと思われます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script> //汎用ルーチン var HoverColor = function($, tagName, color, jduge){ var nodes = document.getElementById($).getElementsByTagName(tagName) for (var i = 0; i < nodes.length; i++) { if ((jduge ||function(){return true})(nodes[i])) { nodes[i].onmouseover = function(){this.style.backgroundColor = color} nodes[i].onmouseout = function(){this.style.backgroundColor = '';} } } }; window.onload = function(){ HoverColor('sample', 'TD', '#557799', function(elem){ return elem.className == 'hover' }); } </script> <style> table { width: 300px; } td { background: #eee; padding: 4px; } </style> </head> <body> <table id="sample"> <tr> <td class="hover"> <input value="this is hover on"/> </td> </tr> <tr> <td class="hover"> <input value="this is hover on"/> </td> </tr> <tr> <td class="hover"> <input value="this is hover on"/> </td> </tr> <tr> <td> <input value="this is hover off"/> </td> </tr> </table> </body> </html> 第一引数が、hover対象要素を包括する要素（範囲の限定が目的） 第二引数が、hover要素 第三引数が、hover色 第四引数が、hover条件（省略化） です。hover対象がtable(td)で無くても使用可能です。
- fujillin
- ベストアンサー率61% (1594/2576)
１行目のgetElementsByTagName('td')がドキュメント内のタグ（この場合はtd）を指しています。 2行目以降が、それぞれのタグにonmouseover、onmouseoutで背景色の指定するループになっています。 idやnameを対象とするなら、getElementsById()やgetElementsByName()を使用すればよいですが、普通はidやnameを重複してつけないでしょうから、ループにする必要はありません。 というよりも、1箇所であれば、わざわざスクリプトを後で走らせる必要もなく、直接HTML内に記述すれば事足りるはずですが・・・ ＜例＞ <p id="hoge" onmouseover ="this.style.backgroundColor = '#f8f8f8';" onmouseout ="this.style.backgroundColor ='';">fuga</p>
- steel_gray
- ベストアンサー率66% (1052/1578)
#1です。なんだか激しく質問を読み間違えてました。#1は忘れてください。 class="abc"のセルにだけ適用させるには。 for (var i=0; i<tdTag.length; i++){ の下に一行追加。 if(tdTag[i]).className != 'abc') continue;
お礼
なるほど・・・そんな使い方も出来るのですね。 有り難うございます。
- steel_gray
- ベストアンサー率66% (1052/1578)
例です。 <style type="text/css"> TD.abc{ background-color:red;/*←これを書き換える*/ } </style> Javascript var css=document.styleSheets[0]; //↑0番目のスタイルシート var rule=css.cssRules||css.rules; rule[0].style.backgroundColor='blue'; //↑0番目のスタイルシートの0番目のルールを変更 スタイルシートの構成によって適当に[0]の部分を変更して利用してみてください。 TD要素に直接style属性で指定がされていれば、そちらが優先されてしまうので、 スタイルはstyle要素かlink要素(外部CSSの読み込み)で指定しておかないと効きません。
お礼
ご回答有り難うございます。 これならとっても簡単に実装することができました。 有り難うございます。