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);では、
テキストボックスtC1に入力されている値が
正常に表示されるのですが・・・。

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

A 回答 (3件)

>気に障られたのでしたらすみません。


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

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

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

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

参考になればよいのですが・・・。
    • good
    • 0
この回答へのお礼

できましたー!!

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

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

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

お礼日時:2001/08/28 11:56

>普通に考えると、確かにそうですよね?


>けれど、それではできなかったんです。

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

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

この回答への補足

またまたすみません。

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

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

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

補足日時:2001/08/28 09:58
    • good
    • 0

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



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

この回答への補足

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

補足日時:2001/08/28 08:43
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QonClickがinput type="image"だとできない!

以前、↓の質問をさせていただき解決したのですが、
input type="image" にしたいのですが、
ただ変更するだけでは、できません。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911

どのように変更したらいいでしょうか?
教えてください!

現在下記の方法でやっています。
<style type="text/css">
.white{
background-Color:white;
color:black;
}
.gray{
background-Color:gray;
color:yellow;
}
.blue{
background-Color:blue;
color:red;
}
</style>
<body>
<form>
全体:
<input type="button" value="White" onClick="document.body.className='white'">
<input type="button" value="Gray" onClick="document.body.className='gray'">
<input type="button" value="Blue" onClick="document.body.className='blue'"><br>
テーブル1:
<input type="button" value="White" onClick="document.getElementById('t1').className='white'">
<input type="button" value="Gray" onClick="document.getElementById('t1').className='gray'">
<input type="button" value="Blue" onClick="document.getElementById('t1').className='blue'"><br>
テーブル2:
<input type="button" value="White" onClick="document.getElementById('t2').className='white'">
<input type="button" value="Gray" onClick="document.getElementById('t2').className='gray'">
<input type="button" value="Blue" onClick="document.getElementById('t2').className='blue'"><br>
</form>

<table width=100% id="t1">
<tr><td>test</td></tr>
</table>
<table width=100% id="t2">
<tr><td>test</td></tr>
</table>
</body>

以前、↓の質問をさせていただき解決したのですが、
input type="image" にしたいのですが、
ただ変更するだけでは、できません。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=2068911

どのように変更したらいいでしょうか?
教えてください!

現在下記の方法でやっています。
<style type="text/css">
.white{
background-Color:white;
color:black;
}
.gray{
background-Color:gray;
color:yellow;
}
.blue{
background-Color:blue;
color:red;
}
</style>
<body>
<form>
全体:
<inp...続きを読む

Aベストアンサー

type=imageを諦めたのは賢明かもしれません。

>指マークにするのって、
><a>タグで囲うしかないでしょうか?

とりあえずアンカーをつかうならこんな感じで
borderを消してやるといいでしょう。
<a href="#" onClick="document.body.className='white';"><img border=0 src="1.jpg"></a>

ブラウザによって仕様がことなりますが、
強制的にカーソルを書き換えることもできます。
<img src="1.jpg" onClick="document.body.className='white';" style="cursor:hand;">

IEでは有効ですが、FFとかではダメみたいですね

Qinput type="file"のvalue監視

input="file"のvalue値が変更されたら別のテキストフィールドに表示するというScriptを書いたのですが動作してくれません。
input="file"ではなく普通のテキストフィールドならば動作します。
fileフィールドでは動作しないのでしょうか。それとも書き方がまずいのでしょうか。

以下、ソースです。

<html>
<head>
<title>test</title>
<script type="text/javascript" src="/javascript/prototype.js"></script>
</head>
<body>
<form action="" enctype="multipart/form-data" method="post">
<input id="file_test" name="file_test" type="file">
<br>
<div id="result">表示</div>
<script type="text/javascript"><!--
window.onload = function() {
new Form.Element.Observer('file_test', 1, function(element, value) {
document.getElementById('result').innerHTML = value;
});
}
//--></script>
</form>
</body>
</html>


よろしくお願いします。

input="file"のvalue値が変更されたら別のテキストフィールドに表示するというScriptを書いたのですが動作してくれません。
input="file"ではなく普通のテキストフィールドならば動作します。
fileフィールドでは動作しないのでしょうか。それとも書き方がまずいのでしょうか。

以下、ソースです。

<html>
<head>
<title>test</title>
<script type="text/javascript" src="/javascript/prototype.js"></script>
</head>
<body>
<form action="" enctype="multipart/form-data" method="post">
...続きを読む

Aベストアンサー

type="file"は、ブラウザごとに特にセキュリティが厳しいので
基本的にはなにもできないと認識しておいた方がよいでしょう。

Qのイベントについて

<input type="file">でファイルを選択した時点にイベントを追加する方法を教えてもらえませんか?
セキュリティの観点から無理なのでしょうか?

Aベストアンサー

ファイルを選択した時点で、
onchange イベントが起こりますので、
それを利用すればいいです。
例:
<form name="File">
<input type="file" name="UPLOADFILE" onchange="alert(document.File.UPLOADFILE.value)">
</form>

Qを選択した時にCtrl+Aになってほしい

ユーザーにURLをコピーしてもらいたいのですが、
<input type="text" name="url" value="http://xxx.com/xxx">
という項目があり、マウスを入力ボックスでクリックすると
Ctrl+Aを押した時と同じ動作にすることは可能でしょうか?

クリップボードにコピーするのは、IE7以降で警告が
出るようなので、Ctrl+Aで全選択してもらう方向で考えています。

Aベストアンサー

Googleで「javascript リファレンス」で検索したところ、
http://www.tohoho-web.com/js/form.htm#ElmText
というページがありました。

ここの「27. フォーム部品(テキスト部品)」に書かれている1文が
そのまま php4 さんの求めているものだと思いますよ。


人気Q&Aランキング

おすすめ情報