テキストの背景色を変える。

質問

onClickで、テキストの背景色を変えたいのですが。
その処理を外部ファイルに記述したいのです。

HTMLファイルでは下記のように記述し、
<・・・・・
<td><input type="button" value="テキストを赤に" onClick="Col001(tC1)"><input type="text" name="tC1" size="20" value=""></td>
・・・・・>

JavaScript外部ファイルでは、
function Col001(objText){
alert(objText.value);
objText.document.bgColor='red';
}
と記述しています。

すると、ページ全体の色が変わってしまいます。
alert(objText.value);では、
テキストボックスｔC1に入力されている値が
正常に表示されるのですが・・・。

テキストボックスの背景色だけを変える場合には
どのようにしたらいいのでしょうか？
どなたか教えてください。
よろしくお願いします。

回答No.3

sight · ベストアンサー

>気に障られたのでしたらすみません。
いぇ、そういうわけではありません。
ただ、私の知りうる限り、bgColorという属性を持っているのはdocumentsとlayerだけみたいなので、できないのではないか？？と思ったのです。
ちなみに、同一ページ内でテストしても
objText.document.bgColor='red';
の場合IEはページ背景色がかわり、NNではエラーになりました。

よく考えると、HTMLのINPUTにもカラー関係の属性などありません。変更するにはスタイルシートを用いる必要があります。ですから、JavaScriptから操作するにしても、一度スタイルシートを介さなくてはならないのではないでしょうか？

そこで、
objText.style.backgroundColor'red';
にしてはいかがでしょう？

あと、ちょっと邪道ですが思いついたもの。
あらかじめ、変更後のデザインを適当なID（たとえばinTxt）でスタイルシートで定義しておき、JavaScriptで
objText.id = 'inTxt' ;
という風にIDを変更して定義されているIDのスタイルシートが効くようにする。

参考になればよいのですが・・・。

お礼

できましたー！！

「objText.style.backgroundColor'red'; 」
の方でやってみたら、ばっちりできました。

長々とおつきあいいただいて
本当にありがとうございました。

基礎ができてないくせに、欲張りすぎかもしれません。
また何かありましたら、懲りずに書き込みさせていただきたいと思います。
よろしくお願いします。

回答No.2

sight

>普通に考えると、確かにそうですよね？
>けれど、それではできなかったんです。

それほどふつうに考えた訳ではないのですが、
もっとふつうにかんがえるのならば、Form ElementsであるINPUTエリアには
bgColorという属性が存在しないのではないでしょうか？

外部ファイル云々、と書かれていますが、同一ドキュメント中に記述した場合は期待通りの動きをしたということなのでしょうか？？

補足

またまたすみません。

普通という表現が良くなかったようですね。
気に障られたのでしたらすみません。

同一ドキュメント内に記述した場合については、
いろんなHPでサンプルが表示されていました。

けれども、それをどうにかして外付けにできないかなと
奮闘しているのです。

回答No.1

sight

全体のソースがある訳じゃないので試しませんけど、

>objText.document.bgColor='red';
って、なにかおかしくありませんか？
これ、objTextをもとにもどすと、
document.form.tC1.document.bgColor='red';
ですよね？？
「ドキュメントのフォームのtC1のあるドキュメントの背景色」
と解釈されているのでしょうか？ブラウザには。
objText.bgColor='red';
とかになるんじゃないですか？

補足

ご記入いただいてありがとうございます。
普通に考えると、確かにそうですよね？
けれど、それではできなかったんです。
で、悩んでいるのです。
なんででしょうかねぇ・・・。