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と関連する良く見られている質問

Qはがきの大きさの背景イラストを無料でダウンロードしたい!!

こんばんわ

最近、はがきにて懸賞に応募しているのですが、
白地のはがきに黒のボールペンで書いても味気ないので
PCで背景を印刷してから応募内容を書いて見ようと思いますが。。。

うまく無料でダウンロードできて「はがき大の背景イラスト」なのが
見つかりません。
どなたか詳しい方いらっしゃいましたらよろしくお願いします

Aベストアンサー

イラストではないですが、こちらのサイトの左下にある「背景」は使えると思いますよ。
「ファミリー」「フォーマル」「和風」と種類があります。
年賀状用のサイトなのですが「背景」には文字が入っていないので、いろいろな使い方ができると思います。
http://cp.c-ij.com/japan/otasuke/nenga/

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とかではダメみたいですね

Qフリーのイラストを集めたいのですが、背景が邪魔です

無料の素材サイトから、人物や物(電話機、自動車など)のイラストを集めたいのですが、背景が邪魔です。

素材集では、ほとんどの素材の背景は白になっていると思いますが、背景がクリア(無色)の素材はどこかにありますか?

それとも、やはり、一つずつ切り抜いていかなければならないのでしょうか?

Aベストアンサー

こんにちは。

時々フリーの素材サイトでも、透過ファイルで提供しているサイトがありますよ。
下記はいずれも、商用利用・加工可能です。

http://www.emstudio.jp/
http://sozaizchi.com/index.html
http://sozai.7gates.net/info/kiyaku.html


ちなみに、Photoshopですと、次の方法で背景を削除できます。

1.背景色が1色の場合
 自動選択ツールで背景をどこか選択 → 削除

2.背景が複雑な場合
 フィルタメニュー→抽出、で画像全体を選択


他にもいろいろな方法で画像のみ、残すことができます。

下記のようなサイトもありますので、ご参考まで。
http://www.dougamanual.net/photoshop.html

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イラストの背景が黒くなる

インターネットでイラストをダウンロードしていました。マイピクチャーの中に気に入ったイラストを入れておくと便利なので。ところが、「開く」で見るとイラストの背景が白なのに、「保存」すると背景が黒になってしまいます。さっきまで他のイラストは平気だったのに急にそうなり、それ以降はみんな同じ現象です。何か設定が変わっちゃたのでしょうか? どうすれば白い背景にもどりますか? OSはXPです。イラストをダウンロードしていたサイトはプリントアウトファクトリーというサイトです。

Aベストアンサー

プリントアウトファクトリーというサイトは、http://www.printout.jp/
ですよね?

で、どのイラストからそのような現象が起きてるのでしょうか?
また、それまで正常だったイラストも、背景が黒になってしまいますか?

考えられる対処方は、ブラウザの一時ファイル(キャッシュ)のクリアを試してください…改善されるかも。

または、元々そのイラストには、背景色は無く透明だった…と云う可能性もありませんか?

Qイラストの背景を透明にしたい

イラストの背景を透明にしたい

初歩的な質問かもしれませんが、よろしくお願いします。

フォトショップのイラスト(背景が白)をインデザインに貼り込んだ際、
背景が白いままでなく透明になるようにするには、
どうしたらよいでしょうか?

例えば添付画像で示した★の部分がイラストとして、
インデザイン上で背景に色をしいて、★をのせるようなことをしたいのですが。

よろしくお願いします。

Aベストアンサー

レイヤーをダブルクリックしてレイヤー0にする
背景が白とか単色だったら色域選択して、編集→消去してPSD形式で保存

>イラストの微妙なエッジがなくなるのは覚悟することになるでしょうか?
エッジが白で無い限り、エッジは無くなりません

エッジが白の部分は選択範囲を足せばいいんだし

Qのイベントについて

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

Aベストアンサー

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

Qイラストの背景を純白の白にするにはどうしたらいいですか?

イラストの背景を純白の白にするにはどうしたらいいですか?

今、知人が書いたイラストを自分のパソコン(Windows Vista)を使ってスキャンしています。スキャンするソフトウェアはEPSON Scanを使っています。複合機本体の型番は「PM-A900」を使用しています。

そこで質問なんですが、イラストをスキャンすると何故か背景が薄ピンクがかった色になります(白い背景の時もあります)
イラスト自体の背景の色は白なんですがスキャンするとこうなります。
特にイラストをピンク色で染めて書くと背景まで薄ピンク色になります。
これは何故でしょうか?

そして背景を純白色にする方法(ソフトウェアでも構いません)は何かありませんか?
宜しくお願い致します。

Aベストアンサー

どの方法についてでしょうか?

・スマート修正の場合、白くしたいポイントはいくつでも増やすことが可能です。(どちらかというとワンタッチ)
・背景消しゴムの場合、こするようにドラッグしつつ動かすことによってエッジにある微妙なカス(?)も一緒に消えてくれます。
・メークオーバーツールの場合、クリックすればするほどその範囲が広がっていきます

先ほどの方法とは違う方法もあげてみます。
◆カーブを使う方法
・方法1
 1.[調整(A)]→[明るさとコントラスト]→[カーブ]を選択
 2.ウィンドウ右下の白いボタンをクリック後、その画像で一番明るく指定したい部分をクリック
 3.ウィンドウ右下の黒いボタンをクリック後、その画像で一番暗く指定したい部分をクリック
・方法2
 1.RGBとなっている部分を「赤」にし、少し右下の方にカーブを動かしてあげると赤の出力が減る

◆カラーチェンジャー
 1.ラーニングセンターより「画像をレタッチ・復元する」より「カラーチェンジャー」を選ぶ
 2.色を白を選択し、白くしたいところに流し込む

画像によってベストポイントは違うので、良い感じのポイントをみつけるまで
スポイト→リセットをしてみてください。
実際、どれぐらい画像が赤くなっているかがわからないのでこんな形の説明になってしましたが、
また分からなければ補足願います。

どの方法についてでしょうか?

・スマート修正の場合、白くしたいポイントはいくつでも増やすことが可能です。(どちらかというとワンタッチ)
・背景消しゴムの場合、こするようにドラッグしつつ動かすことによってエッジにある微妙なカス(?)も一緒に消えてくれます。
・メークオーバーツールの場合、クリックすればするほどその範囲が広がっていきます

先ほどの方法とは違う方法もあげてみます。
◆カーブを使う方法
・方法1
 1.[調整(A)]→[明るさとコントラスト]→[カーブ]を選択
 2.ウィンドウ右...続きを読む

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ランキング