- 締切済み
オンマウスでテキスト変化
オンマウスでテキスト表示でこまっておりまして、yamabejpさんの以前のソースをみつけ実効してみましたが 下記(\'文章を変更する\')の箇所の文章にＣＳＳで太字にしたり、マージンしたりしたいのですが どのように書き換えればできますでしょうか。。 初心者ですみません。<script language="javascript"> function textChange(id,text){ document.getElementById(id).innerText=text } </script> <img src="nodata" width="100" height="100" onMouseOver="textChange('text1','文章を変更する')"><br> <span id="text1">このへんに文書</span>
- ww_puper
- お礼率80% (17/21)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- yuu_x
- ベストアンサー率52% (106/202)
ごめ、ちょい修正 <a href="#" onclick="return false;"> ↓ <a href="#" onmousedown="return false;"> これで IE 以外フォーカス時の破線が表示されなくなる。（宿敵 IE） ついでに .xxx a img{ border : none; } 追加。
- yuu_x
- ベストアンサー率52% (106/202)
・innerText はIE 拡張 通常は textContent 又は innerHTML(無難) 又は nodeValue ・ 、、、口うるさいかな。 js ぢゃ無いけど参考までに。 CSS .xxx a{ color : black; text-decoration : none; cursor : default; } .xxx a .ShowByHover{ display : none; } .xxx a:hover .ShowByHover{ font-weight : bold; margin : 10px; display : inline; } .xxx a:hover .HiddenByHover{ display : none; } HTML <div class="xxx"> <a href="#" onclick="return false;"> <img src="nodata" width="100" height="100" alt=""><br> <span class="HiddenByHover">このへんに文書</span> <span class="ShowByHover">文章を変更する</span> </a> </div> アンカーの使い方間違ってるような気もする & 使う場所が限られる(a の中に書かなきゃいけない & a の下は inline 要素のみ) & href="#" が無いと IE Safari で動作しない ∴余計なものが入る ∴参考までに。 書いといてなんですが、与件の場合なら js で既出のように、クラス書き換えたほうがいいかもしれません。なんとなく CSS でいけるなーと思っただけなので。 クラス書き換えについては、className に単純に代入すると既存のクラスを全て書き換えてしまうので、汎用性を考えるなら replace などで置換したほうがよいです。
- fujillin
- ベストアンサー率61% (1594/2576)
文字の変更と同時にCSSを変更するということですよね？ CSSを2種類用意しておいて（片方は変更前用・・なくてもよい、もう片方は変更後用）、textChangeの中で適用するCSSも同時に変えてしまえば良いでしょう。styleを直接変えてもいいけど、この方がわかりやすそう・・・ <html> <head> <style type="text/css"> .hoge{font-weight: bold; color:red;} </style> </head> <body> <script language="javascript"> function textChange(id,text){ document.getElementById(id).innerText=text; document.getElementById(id).className='hoge'; } </script> <img src="nodata" width="100" height="100" onMouseOver="textChange('text1','文章を変更する')"><br> <span id="text1" class="">このへんに文書</span> </body> </html> （CSSの指定にidを利用することもできますが、問題の元になりそうなので、class利用にしています。）
お礼
ご返事頂きまして有り難うございます。回答前にcssの指定をidにしてしまったのですが、問題の元とは..？すみません、初心者で当たり前のことかもしれないのですが。お時間が開きましたときに教えていただければ幸いです。
- kuma8055
- ベストアンサー率28% (27/94)
質問の意図を取り違えてるかもしれませんが、書換え先のタグ(<span id="text1">)に、style属性なりクラス設定して外部CSS使うなりするというのはダメなんでしょうか？ 入力文字列でスタイルを変えたいのであれば、innerHTMLでタグ付きの文字列を出力して別個のCSS適用するとか。
お礼
ご回答有り難うございます。 初心者でおはずかしいかぎりですが、innerHTMLでタグ付きの文字列を出力とはどのようなことなのでしょうか？ ほんとすみません、お時間があるときにでもよろしければ教えてください。
お礼
すごく詳しく色々と有り難うございます！私もaの中に書かなきゃならないのが少し気になってこのままでいいものか、まよっていたところなので色々と勉強になりました。。 cssでも出来るのですね。。 勉強がたりなくてすみません、