- ベストアンサー
クッキーを食べさせた会員には割引価格を適用したい
- クッキーを食べさせた会員には割引価格を適用するための方法を教えてください。
- 質問のポイントは以下の3点です：価格が表示されない、有効期限は24日間かどうか、function cgIMG()の役割は何ですか？
- 質問文章には、クッキーを使用して会員に割引価格を提供する機能が記述されています。ただし、いくつかの疑問点があり、価格が表示されない理由やクッキーの有効期限についての情報が必要です。さらに、関数cgIMG()の目的や機能についても理解したいです。
- toutetsu
- お礼率35% (25/71)
- JavaScript
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (5)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
＞Firefoxで、フォームのdisabledが効いていない ＞<INPUT TYPE="text" NAME="kakaku">にfm.kakaku.value = price;で指定した価格が表示されない document.fm.kakaku.value=price; のようにしてみて下さい。 多分、disabledについても同じ原因だと思います。 documentを省略するソースが多いですが、省力しない方がいいです。 idから直接捕まえる場合はいいですけど。
補足
BLUEPIXYさん、ご指摘いただいたところを修正したら希望通りに動きました！ 適切な回答ありがとうございました。 他所からコピーして組み立てているだけでしたので基本的なことすら理解していませんでした。 これからはdocumentを省略せずに書くよう心に留めておきます。 今回は大変勉強になりました。 最後にもうひとつだけお聞きしたいことがあります。 これもきっと初歩中の初歩のような気がして、お聞きするのは恥ずかしいのですが、どんなに検索しても似たようなケースにヒットしないため教えていただけませんでしょうか？ 内容は簡単でvar stock = 0;//在庫あり=1, 在庫なし=0 として、在庫なし=0のときに、<head>内にCSSを書き込み文字を赤字にしたいのです。 フラグとなるvar stock = 0;は仕様上、body内に書き込みます。 恐らく引数を渡して、if（在庫チェック関数()）{ CSS書き込み }となるんじゃないかと想像しているのですがここの流れがよくつかめません。 何度もお聞きして心苦しいのですが最後にアドバイスをいただけるとうれしいです。 よろしくお願いいたします。 <html> <head> <style type="text/css"> <!-- #soldout { color: black; } --> </style> <script type="text/javascript"> <!-- function stockStatus (){ if(stock == 0) { document.write('<style type="text/css"><!-- #soldout { color: red; } --><\/style>'); } } //--> </script> </head> <body onload="stockStatus();"> <script type="text/javascript"> <!-- var price = '20000'; var xday = new Date(2005, 9, 23, 24); var stock = 0; //在庫あり=1, 在庫なし=0 //--> </script> <p id="soldout">完売</p> </body> </html>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
＃３は、論点をはずしてる？と思ったので追加 実際に試してないのでいい加減ですけど、 function checkmember(){ if(会員か？){ //会員の時の処理 } else { //会員じゃない if(非会員としてまだクッキーに登録されていない？){ //非会員としてクッキーに時間と共に書き込む } //時間を取りだし、有効な時間内のアクセスかどうか調べて処理 } } みたいな感じでやればいいのでは
お礼
firefoxでもうひとつ問題がありました。 <INPUT TYPE="text" NAME="kakaku">にfm.kakaku.value = price;で指定した価格が表示されないのです。 IE6ではちゃんと表示されるのにfirefoxでうまくいかないのはなぜなんでしょう？
補足
BLUEPIXYさん、丁寧なご回答ありがとうございました。 教えていただいた内容は私にはまだ高度すぎて、半分も理解したかどうかあやしいところですが時間をかけて何とか希望通りのものを作ることができました。 本当にありがとうございます。 Java Scriptを始めたばかりの初心者が教えてもらってばかりでしたがよくここまでできたものだと一人で悦に入っていました。 しかし・・・困ったことがおきました。 Firefoxでチェックしてみたら、フォームのdisabledがまったく効いていないのです。 IE6ではうまくいきます。 いろいろ調べてみたのですが、以前教えていただいたid="soldout"のときはfirefoxでも問題なくdisabledしますのでクッキーのところに原因があるようです。firefoxのクッキーは有効にしてあります。 完全にお手上げです。 いったいどこに問題があるのでしょうか？もしお判りになれば教えていただけませんでしょうか。 よろしくお願いします。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>詳細：非会員が購入できる時間を指定（４８時間以内）。指定時間までは非会員はフォームが使えない。フォームの下に「２８時間後にご購入いただけます」のように表示。指定時間が来たらフォームが使えるようになる。 クッキーを使って会員と非会員をonLoad時に判定しているわけですから、 会員で無かった場合に、過去に非会員としてアクセスがあったかどうかをクッキーで調べてそういう非会員としてのデータが無い場合には、 非会員としてアクセスがあった日時をクッキーとして保存しておけば、 ２８時間が経過していて、４８時間以内であるかということも調べられると思います。 cgIMGnm=123 が会員だとすると cgIMGnm=000が非会員である。 また、 cgIMGnm=000@2005/09/23 20:00 などとフォーマットすればいいかと思います。
補足
BLUEPIXYさん、早速のご回答ありがとうございました。いつも迅速な回答に本当に感謝しております。 教えていただいた内容を参考に何とかイメージに近いものができたのですが、ひとつだけうまく動作しません。 getMonth()が実際の月-1であるため、var xday = new Date(2005, 9-1, 22, 20);とすればうまく行きます。 しかしこれではPCに不慣れな人間にはわかりにくいです。 new Date(2005, 9, 22, 20);と入力して問題なく動作するにはどこを変更したらよいのでしょうか？ 初歩的な質問な気がするのですがどうやってもうまくいかないためアドバイスいただければうれしいです。 > cgIMGnm=000が非会員である。 > cgIMGnm=000@2005/09/23 20:00 などとフォーマットすればいいかと思います。 ▲ここの部分（特に@）がよくわからなかったのですが、どういうことなんでしょう？ 勉強不足で申し訳ありません。 コードには次の記述が3回も出てきます。よくわからなくてこうなってしまったのですが、もしダイエットさせるよい方法がありましたら教えていただけませんでしょうか？よろしくお願いいたします。 if(document.cookie.substring(0, 11) == "cgIMGnm=123" <html> <head> <script type="text/javascript"> <!-- var price = '20000'; //通常価格 var xday = new Date(2005, 9, 22, 20); //販売開始時間 var mprice = price * 0.9; var today = new Date(); count = Math.ceil( (xday.getTime() - today.getTime()) / (60*60*1000) ); if(document.cookie.substring(0, 11) == "cgIMGnm=123"){ document.write('<style type="text/css"><!-- #memberPrice { font-weight:bold; } --><\/style>'); } function checkmember(num) { if(document.cookie.substring(0, 11) == "cgIMGnm=123"){ fm.kakaku.value = mprice; } else{ fm.kakaku.value = price; count = Math.ceil( (xday.getTime() - today.getTime()) / (60*60*1000) ); if(count > 0) { for (var i =0; i<=fm.length -1 ;i++){ fm.elements[i].disabled=num; } } else { fm.elements[i].disabled=false; } } } function eatcookie(name,data,days){ var cdate=new Date(); cdate.setTime(cdate.getTime()+1000*60*60*24*days); document.cookie=name + "=" + data + " ; expires=" + cdate.toGMTString(); } function writeprice() { document.write('<p id="memberPrice">会員価格：'+mprice+'<\/p><p>通常価格：'+price+'<\/p>'); } function displaytime() { if(document.cookie.substring(0, 11) != "cgIMGnm=123" & count > 0){ document.write(count); document.write("時間後にご購入いただけます"); } } function cgIMG(){ eatcookie("cgIMGnm","123", 10); } //--> </SCRIPT> </head> <body onload="return checkmember(true)"> <p> <script type="text/javascript"> if(document.cookie.substring(0, 11) == "cgIMGnm=123"){ document.write('<a href="#" onClick="cgIMG()">' + '現在ログイン中</a>'); } else{ document.write('<a href="#" onClick="cgIMG();location.reload()">' + 'ログインしてください</a>'); } </script> <script type="text/javascript"> writeprice(); </SCRIPT> </p> <form name="fm" id="fm" Action="" METHOD="POST"> <INPUT TYPE="text" NAME="kakaku" id="kakaku"> <SELECT NAME="kazu"><OPTION>1</OPTION><OPTION>2</OPTION></SELECT> <SELECT NAME="color"><OPTION>赤</OPTION><OPTION>青</OPTION> </SELECT> <INPUT TYPE="SUBMIT" VALUE="カートに入れる"> </FORM> <form> <script type="text/javascript"> displaytime(); </SCRIPT><br> <input type=button onclick=eatcookie("cgIMGnm","0",-1) value="クッキー削除"> </form> </body> </html>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
>・価格が表示されない。 ＞document.write("<p>会員価格：'+mprice+'</br>通常価格：'+price+'</p>"); の部分を言ってるんだったら document.write("<p>会員価格："+mprice+"</br>通常価格："+price+"</p>"); とします。 また、そういう使い方であるなら mpriceとpriceは大域的であるので、 ＞var price = '20000'; ＞var mprice = price * 0.9; を ＞function checkmember() { より前（上）に出します。 >・有効期限は24日間？ ＞function eatcookie(name,data,days){ のdaysが有効期限 なので、このプログラムでは１０日間 >・function cgIMG()の役割。 ＞eatcookie("cgIMGnm","123", 10); を呼び出しているだけ、 直接プログラムの各部に eatcookie("cgIMGnm","123", 10) を書くと、それぞれの引数を変更するときに、各部をいちいち変更しなくてはならなくなるので、１箇所にまとめる意味で間接的にしているのだと思う。
補足
BLUEPIXYさん、いつも丁寧に教えていただいてありがとうございます。 お返事遅くなって申し訳ありませんでした。 教えていただいた内容は大変参考になりました。少しはクッキーの働きがつかめてきた感じがします。 さて、機能を追加するためにコードを書き直していたのですが、▼次の機能追加がどうしてもわかりません。 ●非会員は指定時間までフォームを使えなくする。 詳細：非会員が購入できる時間を指定（４８時間以内）。指定時間までは非会員はフォームが使えない。フォームの下に「２８時間後にご購入いただけます」のように表示。指定時間が来たらフォームが使えるようになる。 前回教えていただいたものを元にフォームを使えなくするところまではうまくいきました。しかし指定時間に使えるようにすることがどうしてもできません。▼下のURLを参考にしたりしましたが理解できませんでした。 http://jsm.suepon.com/script/jsm13.html お手数かけて申し訳ありませんがもう少しだけおつきあいいただけませんでしょうか？よろしくお願いいたします。 また別の質問のときに回答者の方から教えていただいたのですが、私のコードは無駄が多く、美しくないそうです。何かお気づきの点がありましたら些細なことでもご指摘いただけるとうれしいです。 <html> <head> <script type="text/javascript"> <!-- var price = '20000'; var mprice = price * 0.9; if(document.cookie.substring(0, 11) == "cgIMGnm=123"){ document.write('<style type="text/css"><!-- #memberPrice { font-weight:bold; } --><\/style>'); } function checkmember(num) { if(document.cookie.substring(0, 11) == "cgIMGnm=123"){ fm.kakaku.value = mprice; } else{ fm.kakaku.value = price; for (var i =0; i<=fm.length -1 ;i++){ fm.elements[i].disabled=true; } } } function eatcookie(name,data,days){ var cdate=new Date(); cdate.setTime(cdate.getTime()+1000*60*60*24*days); document.cookie=name + "=" + data + " ; expires=" + cdate.toGMTString(); } function writeprice() { document.write('<p id="memberPrice">会員価格：'+mprice+'<\/p><p>通常価格：'+price+'<\/p>'); } function cgIMG(){ eatcookie("cgIMGnm","123", 10); } //--> </SCRIPT> </head> <body onload="return checkmember(true)"> <p> <script type="text/javascript"> if(document.cookie.substring(0, 11) == "cgIMGnm=123"){ document.write('<a href="#" onClick="cgIMG()">' + '現在ログイン中</a>'); } else{ document.write('<a href="#" onClick="cgIMG();location.reload()">' + 'ログインしてください</a>'); } </script> <script type="text/javascript"> writeprice(); </SCRIPT> </p> <form name="fm" id="fm" Action="" METHOD="POST"> <INPUT TYPE="text" NAME="kakaku" id="kakaku"> <SELECT NAME="kazu"><OPTION>1</OPTION><OPTION>2</OPTION></SELECT> <SELECT NAME="color"><OPTION>赤</OPTION><OPTION>青</OPTION> </SELECT> <INPUT TYPE="SUBMIT" VALUE="カートに入れる"> </FORM> <form> ２８時間後にご購入いただけます <input type=button onclick=eatcookie("cgIMGnm","0",-1) value="クッキー削除"> </form> </body> </html>
関連するQ&A
- HTML内の指定の位置にプルダウンを読み込みたい
まずラジオボタンがあって、 選択するとfunctionに格納してあるプルダウンを ラジオボタンの下の指定した箇所に表示させたいです。 ラジオボタンを変更すると、プルダウンも変わるようにしたいです。 教えてください。お願いします。 <HTML><HEAD> <script type="text/javascript"><!-- function pulldown1(){ document.write('<select name="AAA" size="1">'); document.write('<option value="1-1" selected>1-1</option>'); document.write('<option value="1-2">1-2</option>'); document.write('</select>'); } function pulldown2(){ document.write('<select name="BBB" size="1">'); document.write('<option value="2-1" selected>2-1</option>'); document.write('<option value="2-2">2-2</option>'); document.write('</select>'); } //--></script> <style type="text/css"> </HEAD> <BODY><FORM> <INPUT type="radio" name="rdoSample" onClick="pulldown1()">タイプ１ <BR> <INPUT type="radio" name="rdoSample" onClick="pulldown2()">タイプ２ </FORM></BODY> </HTML>
- ベストアンサー
- JavaScript
- プルダウンメニューのリンクで別ウインドウを開く
下記のようなプルダウンメニューを作成したのですが、同じウインドウ内でリンクするのではなく別ウインドウで開くようにするにはどこを変更すればよいのでしょうか？ head内>>>>>>>>>>>>> <script language="JavaScript" type="text/JavaScript"> <!-- function gotoURL(formName){ var gotoUrl=document.forms[formName].elements[0].options[document.forms[formName].elements[0].selectedIndex].value document.location.href=gotoUrl } --> </script> body内>>>>>>>>>>>>>> <form name="fm0"> <select name="links"> <option selected>＜ここから選択してください＞</option> <option value="aaa.html">あああ</option> <option value="bbb.html">びびび</option> </select> <input name="BUTTON" TYPE=BUTTON onClick="gotoURL('fm0')" VALUE="GO!"></form>
- ベストアンサー
- グラフィックソフト
- OPTION の値をテキストエリアに
こんにちは。 すみませんが教えてください。 下記の様に作っています。 テキストエリア（note1)に、OPTIONのS・M・Lというように表示させたいのですが、1・2・3というようになってしまったり、エラーがでてしまいます。 どのように変えたらよろしいでしょうか？ ”サイズ”＋＃＃＃＃の所を何回か書き直して見ましたが上手くいきません。 私が何をしたいかというと、 確認ボタンを押したら表記されている文字や数字をテキストエリアに書きたいのです。 よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT Language="JavaScript"> <!-- A = new Array("\0","\ 1,000","\ 1,200","\ 1,500"); function Fa(x) { document.FM.TE.value = A[x]; } function ctotal() { var totalp=0; var disp1=document.FM.TE.value+" 円 "+" サイズ "+####### ; if(document.FM.TE.value>0) { totalp=parselt(totalp)+parselnt(document.FM.TE.value); } document.form03.note1.value=disp1; } //--> </SCRIPT> </HEAD> <BODY> <FORM name="FM"> <TABLE BORDER="3"><TR><TD> <SELECT name="OP" onChange="Fa(this.selectedIndex);"> <OPTION value="0" selected>0</OPTION> <OPTION value="1">S</OPTION> <OPTION value="2">M</OPTION> <OPTION value="3">L</OPTION> </SELECT></TD><TD> <INPUT size="8" type="text" name="TE" value="0"></TD></TABLE></FORM> <FORM NAME="form03"> <INPUT TYPE="BUTTON"VALUE="確認" onclick="ctotal()"> <TEXTAREA NAME=note1 ROWS=5 COLS=30></TEXTAREA></FORM> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 複数のvalue値を返すには
Ａを選択した時10、Ｂを選択した時100、Ｃなら1000と <input type="text" name="TEXT" value="">に表示されるように以下のようなjavascriptを記述しましたが、 Ａの時10と20を、Ｂの時100と200、Ｃの時1000と2000が もうひとつの<input type="text" name="TEXT2" value="">に表示できるようにするにはどうしたらよいのでしょうか。 記述方法を教えていただければ一番いいのですが、サンプルがあるページでもいいので、教えてください。 <script type="text/javascript"> <!-- function kai(){ document.FORM.TEXT.value = document.FORM.num.value; } //--> </script> </head> <body> <form name="FORM"> <input type="text" name="TEXT" value=""> <select name="num" onChange="kai()"> <option value="10">Ａ</option> <option value="100">Ｂ</option> <option value="1000">Ｃ</option> </select> </form>
- ベストアンサー
- JavaScript
- セレクトボックスを使った計算式
テキストボックスに文字を入力してセレクトボックスで四則計算 をプルダウンメニューで選択し、３つ目のテキストボックスに 計算結果を表示するにはどのようにしたらよいのでしょうか？ とりあえず途中まで作ってみました。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>スクリプト練習</title> <script type="text/javascript"> <!-- function keisan(){ if(option value="＋"){ document.f1.t3.value(document.f1.t1.value + document.f1.t2.value); } } //--> </script> </head> <body> <form name="f1"> <input type="text" size="5" name="t1"> <select name="color2"> <option value="＋">＋</option> <option value="－">－</option> <option value="×">×</option> <option value="÷">÷</option> </select> <input type="text" size="5" name="t2"> <input type="button" value="=" onClick="keisan()"> <input type="text" size="5" name="t3"> </form> </body> </html> if文を作るところが特にわからず止まっています。 どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- クッキーの初歩的質問
クッキーに下記のような内容を書き込む方法を教えて下さい。上から順にクリックしていったときに、alert(★)の部分を「1,2,3」という結果にしたいのですが。 <SCRIPT language=JavaScript> function memoryCookie(num){ expires = new Date() expires.setTime(expires.getTime() + 24*60*60*1000) document.cookie = "mydata=" + num + ";expires=" + expires.toGMTString() alert(★) } </SCRIPT> <form name="myform"> <INPUT TYPE="CHECKBOX" NAME="test" VALUE="1" onclick="memoryCookie(this.value)">1<BR> <INPUT TYPE="CHECKBOX" NAME="test" VALUE="2" onclick="memoryCookie(this.value)">2<BR> <INPUT TYPE="CHECKBOX" NAME="test" VALUE="3" onclick="memoryCookie(this.value)">3<BR>
- ベストアンサー
- JavaScript
- <form>を使用しないことによる、干渉の回避策
以下の様に、 セレクトボックスで選択した値を、 ボタン押下でそれぞれのテキストボックスに一括で代入する スクリプトがあるのですが、この様式を使用するつもりであった場所は、他のJavaScriptの関数で定義した<form>と干渉してしまい、 動かない現象が起きてしまいました。 このスクリプト中で、<form>を使用しない形で、 同じ動作をさせるには、どの様に修正したらよろしいでしょうか。 ご教授、よろしくお願いします。 <HEAD>要素 function my1() {a=document.form1.eiji.value; document.form1.eiji2.value=a;} function my2() {a=document.form2.moji.value; document.form2.moji2.value=a;} function my3() {a=document.form3.suuji.value; document.form3.suuji2.value=a;} <BODY>要素 <form name="form1"> <SELECT NAME = "eiji" style="width:150px;"> <OPTION VALUE = "">↓-選んで下さい-</OPTION> <OPTION VALUE = "a">a</OPTION> <OPTION VALUE = "b">b</OPTION> <OPTION VALUE = "c">c</OPTION></SELECT> <input type="text" name="eiji2" style="width:150px;"> </form> <form name="form2"> <SELECT NAME = "moji" style="width:150px;"> <OPTION VALUE = "">↓-選んで下さい-</OPTION> <OPTION VALUE = "あ">あ</OPTION> <OPTION VALUE = "い">い</OPTION> <OPTION VALUE = "う">う</OPTION></SELECT> <input type="text" name="moji2" style="width:150px;"> </form> <form name="form3"> <SELECT NAME = "suuji" style="width:150px;"> <OPTION VALUE = "">↓-選んで下さい-</OPTION> <OPTION VALUE = "1">1</OPTION> <OPTION VALUE = "2">2</OPTION> <OPTION VALUE = "3">3</OPTION></SELECT> <input type="text" name="suuji2" style="width:150px;"> </form> <input type="button" value="入力" onClick="my1();my2();my3();">
- ベストアンサー
- JavaScript
- JavaScriptでの変数で数値を使った場合の疑問
JavaScriptでの変数で数値を使った場合の疑問 <form action="sample.cgi" name="fm"> <button onclick="allInput()">全入力</button> <input size="10" type="text" name="hoge1" value=""> <input size="10" type="text" name="hoge2" value=""> <input size="10" type="text" name="hoge3" value=""> ・・・・ <input size="10" type="text" name="hoge30" value=""> </form> 上記のようなフォームがあったとします。 hoge1～hoge30まであるためにうけとる方法をforで受け取りたいのです。 <script Language="JavaScript"> function allInput() { for ( var i = 1; i <=30; i++ ) { document.fm.hoge+i.value = document.fm.hoge1.value; //上のiのところで1から30を文字列としたい } } </script> 内部的には document.fm.hoge2.value = document.fm.hoge1.value; document.fm.hoge3.value = document.fm.hoge1.value; document.fm.hoge4.value = document.fm.hoge1.value; ・・・ document.fm.hoge30.value = document.fm.hoge1.value; のようになっていきばいいのですが・・・ たとえになるかわかりませんが、Perlだと下のように$iの変数を文字列として扱えるのですが・・・ for ($i=1;$i <= 30; $i++){ ${"sample$i"} = param("hoge$i"); } よろしくお願いいたします。
- ベストアンサー
- JavaScript
- セレクトメニューの値を読み出す方法
セレクトメニューのoptionに設定した値を読み出したいのですがうまくいきません。間違っている部分をご指摘いただけませんでしょうか。よろしくお願いいたします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <title></title> <script type="text/javascript"> <!-- function checkm(fObj){ price = fObj.options[fObj.selectedIndex].value; } function writePrice() { document.write(price);//通常価格表示 document.write(mprice);//会員価格表示 } //--> </script> </head> <body> <script type="text/javascript"> <!-- var price = '20000'; //通常価格 //--> </script> <script type="text/javascript"> <!-- var mprice = price * 0.9; //会員価格 writePrice(); //--> </script> <form> <select onchange="checkm(this)"> <option value="20000">シルバー</option> <option value="30000">ゴールド</option> <option value="40000">プラチナ</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- 超初心者です。buttonをselectに変えるには？
<SCRIPT language="JavaScript"> function calc1(){document.keisan.Z.value=eval(document.keisan.X.value)*1;} function calc2(){document.keisan.Z.value=eval(document.keisan.X.value)*2;} function calc3(){document.keisan.Z.value=eval(document.keisan.X.value)*3;} </SCRIPT> </head> <FORM name="keisan" > <INPUT type="text" name="X" size="4"> <INPUT type="text" name="Z" size="6"> <INPUT type="button" value="1" onClick="calc1()"> <INPUT type="button" value="2" onClick="calc2()"> <INPUT type="button" value="3" onClick="calc3()"> <INPUT type="reset" value="やりなおし"> </FORM> これの INPUT type="button"を<select>～<select> に変えたいと思っています。 自分の頭ではいろいろやってもうまくいきませんでした。 どなたか御教授を宜しくお願い致します。
- ベストアンサー
- JavaScript
お礼
BLUEPIXYさん、いつもすばやい回答ありがとうございます。 教えていただいた方法で希望通りに動作させることができました。 スタイルシートを書き換えるのはスタイルシートをヘッド内に書き込むという先入観があったためこのような方法は思いもよりませんでした。 document.getElementByIdとスタイルで検索してみたらスタイルシートを書き換える方法がたくさん出てきました。 入り口を間違えるとなかなか先に進めないものですね。 何度も根気よく丁寧に教えていただき大変感謝しております。 できるだけ自力でできるよう勉強しますが、また行き詰ったときはお力をお借りできれば幸いです。