- ベストアンサー
JavaScriptで普通の文字を変更したい
えっと。INPUTタグでならValueの値をJavaScriptで変更ですまが 普通のFONT？などの文字を例えばボタン押下時などに変更をした いのですが、方法がわからずに困っています。 どこかのサイトで見かけたことがあるので出来るとは思うのですが どなたかご存知の方がいらしたら教えて下さい。 どうか宜しくお願いします。
- nsakurako
- お礼率50% (183/364)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
DOMに対応しているブラウザであれば、下記のソースで実現できると思います。 <html> <head> <title></title> <script type="text/javascript"><!-- function changeTxt(txt){ if (document.getElementById){ document.getElementById("chtxt").innerHTML=txt; } } //--></script> </head> <body> <p><span id="chtxt">こんにちは。</span>ようこそ。</p> <form> <input type="button" value="今は朝ですが" onClick="changeTxt('おはようございます。')"><br> <input type="button" value="こんにちは" onClick="changeTxt('こんにちは～。')"><br> <input type="button" value="もう夜ですよ" onClick="changeTxt('こんばんは。')"> </form> </body> </html> 上のスクリプトでは、 document.getElementById("特定の要素のID名").innerHTML="書き換えるHTMLソースの内容" という形で特定の要素内のHTMLソースの書き換えを行っています。 これはDOMとinnerHTMLプロパティを利用したもので、IE5以降、Netscape6以降で動作すると思います。 なお、getElementByIdの部分は、大文字と小文字の部分をすべて正確にこの通りにしておかないと、動作しなくなる可能性がありますので、注意してください。 この例では、span要素にchtxtというID名をつけて、その中のHTMLを書き換えていますが、他の要素に対して同じようにID名をつけて、DOMを利用してそのIDで要素を特定し、その内容を書き換えることも可能です。 いろいろと試してみると良いと思います。 上記では、IE4やNetscape4.xxでは動作しませんが、似たような方法で実現することも可能と思います。 DHTMLについて調べてみると、やり方も見つけられると思いますよ。 と、そちらについては先の方の回答にもありますね。 参考になれば。
その他の回答 (1)
- mousengoke
- ベストアンサー率50% (197/388)
一応NN4でも動作するようにサンプルを作りました。 ただし、NN4での動作は厳しくスタイルシートでposition:absolute;を宣言する必要があります。また、NN4.xではidのスタイルを指定する際#kakikaeのように要素名を省略した形でないと適用されないようです。なお都合によりモジラ系ブラウザーでの動作確認はしていません。 <html> <head> <style type="text/css"> <!-- #kakikae{ position:absolute; } --> </style> <script type="text/javascript"> <!-- function changechar(){ var newchar = "<strong>あー<\/strong>"; if(document.all){ //IEで動作 kakikae.innerHTML = newchar; } else if(document.getElementByID){ //モジラ系ブラウザー(N6以上等)で動作 document.getElementByID("kakikae").innerHTML = newchar; } else if(document.layers){ //NN4.xで動作 document.kakikae.document.open(); document.kakikae.document.write(newchar); document.kakikae.document.close(); } } //--> </script> </head> <body> <form> <input type="button" value="クリック" onClick="changechar()"> </form> <div id="kakikae"> </div> </body> </html>
お礼
早速の回答をありがとうございました。 こんなに複雑とは！！ 教えて頂かなければ、いつまでも到達することは出来ませんでした。 本当にありがとうございました。
お礼
丁寧な回答をありがとうございました。 なるほど、色々と書き方があるんですね。 早速、試してみました。 これで問題が解決しました。 本当にありがとうございました！！