JAVAScriptで文字色変更の方法は?

このQ&Aのポイント
  • onMouseOverを使用してJAVAScriptで文字色を変更する方法を教えてください。
  • 以下のコードでは文字色が変わりますが、任意の色に変更する方法がわかりません。
  • 調査した結果、文字色の指定には文字型が必要とわかりましたが、具体的な解決策は見つかりませんでした。お手数ですが、教えていただけると助かります。
回答を見る
  • ベストアンサー

文字列の引き渡し

onMouseOverを使ってJAVAScriptで記述すれば hoverの変わりになると教えて頂きました。 以下のコードは文字色が変わり動いています。 <table class="hide" onMouseOver="test1(this)">~ function test1(obj) { obj.style.color="black"; } 少し欲を出して、文字色も任意に変更できるようにしようとしました。 そうしたら動いてくれません。 <table class="hide" onMouseOver="change_color(this、black)">~ function change_color(obj,color) { obj.style.color=color ; } 散々調べてblackが文字型だからだろうと見通しは立ったのですが、 根本的な解決には至りませんでした。 とても簡単な問題だと思うんですけど、ご指導お願いします。

noname#147836
noname#147836

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

  • ベストアンサー
  • osamuy
  • ベストアンサー率42% (1231/2878)
回答No.1

change_color(this、black) 1) 引数の区切りが句点漢字「、」になっており、文法違反を犯してます。 2) 文字列定数を指定するべきところを、引用符で囲ってません。変数扱いになりますので、想定外の挙動を示す恐れがあります。 試さないで書いてますが。

noname#147836
質問者

お礼

"の中を'にしていないのが原因でした。 これはちょっと気付きませんでした。 "と'のためだけに9時間、何だったんだろう。 全角の句読点は色々やったときのミスです。 気にしないで下さい。

関連するQ&A

  • セルの色>何が足りないのでしょうか?

    こんにちは。 下記のようなテストを作っています。3択式で実際は5~15問なのでもう少し大きな表です。そこで教えていただきたいことがあります。 下の設定ですと、問(2)へ行くと問(1)で選択した回答の色が消えてしまいます。 どうしたらそのまま残しておけるのでしょうか? 初心者ですので、出来ましたら丁寧なご回答をお願いいたします。(XP、IE6) <html> <head> <script language="JavaScript"><!-- var col; //選択しス色 var old_obj = null;//1つ前に選択した色を記憶しておく変数 function ActiveColor(obj){ //色がクリックされた時 if(old_obj != null){ //1つ前に選択した色の周りに表示されているグレー色を消す old_obj.style.backgroundColor = ""; } //選択した色の周りにグレー色を付ける obj.style.backgroundColor = "darkgray"; col = obj.style.color;//選択された色を保存 old_obj = obj; //現在の選択色を、1つ前として格納 //色をクリックした時にBgChange()関数が実行されないように //イベント階層の浮上(bubble up)をキャンセルする window.event.cancelBubble = true; } //--></script> </head> <body onclick="BgChange();"> <table border=1> <tr> <td>(1)</td> <td style="color:black" onclick="ActiveColor(this);">No.1</td> <td style="color:black" onclick="ActiveColor(this);">No.2</td> <td style="color:black" onclick="ActiveColor(this);">No.3</td> </td> <tr> <td>(2)</td> <td style="color:black" onclick="ActiveColor(this);">No.4</td> <td style="color:black" onclick="ActiveColor(this);">No.5</td> <td style="color:black" onclick="ActiveColor(this);">No.6</td> </tr> </table> </body> </html>

  • onmouseoverはCSS参照に含められるか?

    <div style="color: blue;" onmouseover="this.style.color='red'" onmouseout="this.style.color='blue'">あああ</div>を、 <style type="text/css"> <!-- div { onmouseover="this.style.color='red'"; onmouseout="this.style.color='blue'; } --> </style> みたいには書けませんか? a:hoverだったらできるのは承知していますが、 タグが<a>でなく<div>なので、onmouseover、onmouseoutを使わざるを得ず、 さらにonmouseover、onmouseoutはCSSでなくJSだと思うのですが。

    • ベストアンサー
    • CSS
  • リンクを張った文字列の色

    次のようにするとlink、hover、active、viewedのそれぞれの場合に「リンク先のページのタイトル」の文字列の色がgreen、#ffdddd、#ffffdd、maroonになると思ったのですが、うまくいきません。maroonのままです。 <html> <head> <style type="text/css"> <!-- table {font-size:12px; } a.x:link {color:green; text-decoration:none; } a.x:hover {color:#ffdddd; } a.x:active {color:#ffffdd; } a.x:visited {color:maroon; } --> </style> </head> <body> <table border="0" width="100%" height="400" text="bold"> <tr><td><a href="http://www......html" class="x" target="_blank">リンク先のページのタイトル</a>/td></tr> </table> </body> </html> よろしくお願いします。

    • ベストアンサー
    • HTML
  • javascriptでクリックするごとにセルの色を変えたい

    javascript初心者です。 現在テーブルの作成を行っており、マウスを乗せたら色が変わるやクリックして指定の色に変えるなどは実現いたしましたが、クリックするごとに色が変わる(赤→青→赤→青・・・など)ものができません。 現在下記のように作っていますがエラーが起きてしまいます。 どのように直せばよいかご教授願います。 <script type="text/javascript"> <!-- var color1 = "#ff0000"; var color2 = "#0000ff"; function onC(obj){ if (obj.style.backgroundColor = color1){ obj.style.backgroundColor = color2; } else if (obj.style.backgroundColor = color2){ obj.style.backgroundColor = color1; } } //--> </script> <body> <table border="1" cellpadding=20> <tr> <td onClick = "onC(this)"><br> </td> </tr> </table> </body>

  • hoverした後に表示し続ける

    クイズの答えの一覧をテーブルに作りました。 背景色がFFCなので文字をそれに合わせています。 次の記述でマウスを合わせると文字色が変わって 答えが出てくれるので上手く動いていると思います。 table.hide { color : #FFC } table.hide:hover { color : black } 一旦答えを出したら(hoverしたら)、 答えを出し続けておくことは可能ですか。 今のところマウスが外れると色が背景色に戻ってしまいます。 table.hide:hover:after とか試してみたけど無駄なあがきでした。

    • ベストアンサー
    • CSS
  • 列もハイライト

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ハイライト(JavaScript)</title> </head> <body> <script type="text/javascript"> <!-- function hightlight(target, color){ target.style.backgroundColor = color; } //--> </script> <table border="1" style="border-collapse:collapse"> <tr><th>氏名</th><th>日付</th></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒1</td><td>2005/04/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒2</td><td>2004/02/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒3</td><td>2004/10/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒4</td><td>2004/08/01</td></tr> <tr onmouseover="hightlight(this,'#00FFFF')" onmouseout="hightlight(this,'#FFFFFF')" > <td>生徒5</td><td>2005/06/01</td> </table> </body> </html> で行にハイライトを設定しているのですが、同時に列にも同じようにハイライトを設定したいと思っております。 どのように変更したらよいでしょうか? ご存知の方、宜しくお願いします。

  • リンクにカーソルを合わせると文字が変わる方法

    FC2ブログを使っています。 プラグインのリンクにカーソルを合わせると文字が変わる方法を教えてください。 自分で調べると下のようなものを見つけました。 <html> <head> <title>マウスが重なったら文字のスタイルを変える</title> <script Language="JavaScript"><!-- function change(o,v) { if (navigator.userAgent.indexOf("Firefox") > -1) { o.textContent = v; }else{ o.innerText = v; } } // --></script> </head> <body bgcolor="white"> <a href="#" id="myText" onMouseover="change(this,'Hello World !!')" onMouseout="change(this,' マウスを乗せて')">マウスを乗せて</a> </body> </html> この方法でおかしな点はないでしょうか? ブログが重くならないでしょうか? おかしな点や他の方法などありましたらご教授お願いします。

  • 文字を隠すゲーム

    ゲームを作っています。 ページを更新するたびに20種類のことわざから1つが表示されます。 1文字ずつテーブルのセルにいれていくのですが、 隠れています。文字の隠れてる部分をクリックすると文字が現れるのですが、文字数の半分が現れたら プロンプトで「ことわざを予想してください」と表示。ユーザに答えさせる、というゲームです。 文字数の半分、文字を隠すをイベントハンドラで表現したのですが、 左から半分の文字だけが現れる関数になってしまいました。 ことわざの文字数が半分現れたら… という状況にしたいのですが、行き詰ってます。 コードは以下のとおりです。何かアドバイスをいただけないでしょうか。 <script language="JavaScript"> <!-- if (document.getElementById){ document.write ("<style type='text/cs\s'>"); document.write ("<!--"); document.write("span{color:lavender;background-color:lavender;"); document.write ("border:2px ridge ivory;cursor:hand;cursor:pointer;}"); document.write ("-->"); document.write ("</style>"); } function setEvent(){ if (!document.getElementById) return; var elms = document.getElementsByTagName("span"); for(i = 0; i < elms.length/2; i++){ elms[i].onclick=show; } } function show(e){ if(window.event) obj =window.event.srcElement; else if(e) obj = e.currentTarget; obj.style.backgroundColor="ivory"; obj.style.color="black"; } //--> </script>

  • jQueryのhideのやり方について教えてください。

    jQueryのhideのやり方について教えてください。 下記のようなtr要素に触れたときにp要素を表示するといったものです。 ページを読み込んだときは非表示にしておいて触れると表示するようにしたいのですが・・・読み込んだときに非表示にするにはどのようにしたらいいでしょうか? また、p要素に触れると当然ですがp要素が消えてしまいます。 どのように対策したらいいでしょうか? <table class="style1"> <tr id = "tr1"> <td class="style3"></td> <td class="style4"> <img alt="" src="login-blue.gif" style="width: 89px; height: 26px" /></td> <td class="style5"> <img alt="" src="b_count1.gif" style="width: 24px; height: 27px" /></td> <td class="style6"></td> <td><div id = "load1"></div></td> </tr> <tr> <td class="style2" colspan="5"> <p id = "dtl">熱いジュースふりぼる <br /><a href=gazo.htm>すごいジュース捻りだす</a></p> </td> </tr> </table> $("#tr1").hover( function() { $("#dtl").show(); }, function() { $("#dtl").hide(); } );

  • value値がマイナス時、赤字で表示したい(js)

    web上でvalue値がマイナスの時、赤字で表示したいです。 入力値が変更された時に赤字で表示することはできましたが、 最初に入れておくvalue値がマイナスの時も、ページ読み込み時に赤字で表示させたいです。 下記、現在のコードです。 よろしくお願いします。 <input type="text" placeholder="0" value="-1234" onChange="FUNC(this)"> <script> function FUNC(obj){ if(obj.value -0 < 0){ obj.style.color = "red"; }else{ obj.style.color = "black"; } } </script>

専門家に質問してみよう