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

締切り済みの質問

特定のクラスのバック地をマウスオーバーで色替えする方法

クラス名がついた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名がついたもののみに反映させたいのです。

初心者でやり方が分からなかったのでご質問させていただきました。
宜しくお願いいたします。

投稿日時 - 2008-08-01 11:45:30

QNo.4219776

すぐに回答ほしいです

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

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

回答(4)

ANo.4

汎用性や再利用性を考慮するなら、以下のように別ルーチン化したほうが良いかと思われます。

<!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)で無くても使用可能です。

投稿日時 - 2008-08-04 12:51:23

ANo.3

1行目の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>

投稿日時 - 2008-08-01 13:44:37

お礼

ご回答有り難うございます。
これならとっても簡単に実装することができました。
有り難うございます。

投稿日時 - 2008-08-01 23:28:24

ANo.2

#1です。なんだか激しく質問を読み間違えてました。#1は忘れてください。

class="abc"のセルにだけ適用させるには。
for (var i=0; i<tdTag.length; i++){
の下に一行追加。
if(tdTag[i]).className != 'abc') continue;

投稿日時 - 2008-08-01 12:13:11

お礼

なるほど・・・そんな使い方も出来るのですね。
有り難うございます。

投稿日時 - 2008-08-01 23:29:04

ANo.1

例です。
<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の読み込み)で指定しておかないと効きません。

投稿日時 - 2008-08-01 12:00:49

あなたにオススメの質問