ベストアンサー

javascriptで文字を拡大・縮小させるには？

2008/05/20 11:38

最近、アクセシビリティを考慮して、ブラウザの機能上だけでなく、 javascriptを使用した、文字を拡大・縮小するボタンがついているHPを良く拝見します。そこで、作成してみたのですが、どうもうまく機能してくれません。下記のようにテキストのみの簡単なソースならＯＫなのですが、表の中の文字なども同じように拡大・縮小させたりするにはどうしたらよいでしょうか？お詳しい方がいらっしゃいましたらどうぞ宜しくご指導お願いします。 <style type="text/css">  </style> <script type="text/javascript"> </script><LINK rel="stylesheet" href="table.css" type="text/css" id="_HPB_TABLE_CSS_ID_"> </HEAD> <body id="bd"> <div><form> <input type="button" class="btn" value="縮小" onclick="sizech('-20')"> <input type="button" class="btn" value="default" onclick="sizech('0')"> <input type="button" class="btn" value="拡大" onclick="sizech('+20')"> </form></div> <P align="center">aaaa<BR> </P>

may555may
お礼率92% (12/13)

JavaScript
回答数6
ありがとう数6

みんなの回答 （6）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

auty
ベストアンサー率58% (284/486)

2008/05/20 13:42 回答No.3

・　元のソースコードとyambejpさまのご指摘をまとめてみました。・　sizech(val)の引数valは、数値を渡すように変更しました。 ------------------------------------------------------------ <html> <head> <title>sizech.html</title> <style type="text/css">  </style> <script type="text/javascript"> </script> </head> <body id="bd"> <div> <form action=""> <input type="button" class="btn" value="縮小" onclick="sizech(-20)"> <input type="button" class="btn" value="default" onclick="sizech(0)"> <input type="button" class="btn" value="拡大" onclick="sizech(+20)"> </form> </div> <div style="top: 50px; left: 50px; position: absolute; z-index: 1;" id="Layer1"> AAAAAAAAAAA <div> <table border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_B_080520130845" class="hpb-cnt-tb2" width="443" height="160"> <tbody> <tr> <td class="hpb-cnt-tb-cell3">AAAAA</td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> </tr> <tr> <td class="hpb-cnt-tb-cell3">BBBBB</td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> </tr> </tbody> </table> </div> </div> </body> </html>

質問者

お礼 2008/05/20 14:04

ご丁寧にありがとうございました。おはずかしながら、ボタンの大きさや文字、はたまたボタン文字の中央表示ができません・・・（涙）ボタンはこれ以上の大きさにはならないのでしょうか？

その他の回答 (5)

auty
ベストアンサー率58% (284/486)

2008/05/20 19:14 回答No.6

＞＞＞　ボタン自体の最初の大きさや、ボタンに表示される文字を＞＞＞　今よりも大きくしたいのですが・・・これには、window.onload または style="font-size:20pt" を使います。 function setButton() { var bsize = 200; // 微調整 var inputs = document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ inputs[i].style.fontSize = bsize + "%"; } } window.onload = setButton; または <input type="button" style="font-size:20pt" class="btn" value="縮小" onclick="sizech(-20)"> 以下のコードを参考にしてみてください。 ------------------------------------------------------------ <html> <head> <title>sizech.html</title> <style type="text/css">  </style> <script type="text/javascript"> </script> </head> <body id="bd"> <div> <form action=""> <input type="button" style="font-size:20pt" class="btn" value="縮小" onclick="sizech(-20)"> <input type="button" style="font-size:20pt" class="btn" value="default" onclick="sizech(0)"> <input type="button" style="font-size:20pt" class="btn" value="拡大" onclick="sizech(+20)"> </form> </div> <div id="Layer1"> AAAAAAAAAAA <div> <table border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_B_080520130845" class="hpb-cnt-tb2" width="443" height="160"> <tbody> <tr> <td class="hpb-cnt-tb-cell3">AAAAA</td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> </tr> <tr> <td class="hpb-cnt-tb-cell3">BBBBB</td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> <td class="hpb-cnt-tb-cell4"></td> </tr> </tbody> </table> </div> </div> </body> </html>

質問者

お礼 2008/05/21 09:54

何度も丁寧にご回答いただき本当にありがとうございました。おかげさまで、思ったとおりのページに仕上げることができました。図々しくも何度も質問させていただきましたが、皆様にご丁寧に教えていただき大変感謝しております。本当にありがとうございました。

auty
ベストアンサー率58% (284/486)

2008/05/20 14:55 回答No.5

・　フォントサイズだけ変えればよいようです。 var inputs = document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ //inputs[i].style.width = inputs[i].offsetWidth * fsize / old_fsize + "px"; inputs[i].style.fontSize = fsize + "%"; }

質問者

お礼 2008/05/20 16:28

度々ご回答ありがとうございます。ボタンを押したときにサイズが変わるのではなく、ボタン自体の最初の大きさや、ボタンに表示される文字を今よりも大きくしたいのですが・・・わがままばかり言ってしまって大変申し訳ないのですが、もしお時間がありましたら宜しくお願いします。

HIRSYU
ベストアンサー率51% (45/87)

2008/05/20 14:45 回答No.4

>ご丁寧にありがとうございました。 >おはずかしながら、ボタンの大きさや文字、 >はたまたボタン文字の中央表示ができません・・・（涙） >ボタンはこれ以上の大きさにはならないのでしょうか？ボタンサイズも拡大縮小して欲しいってことですか？もしそうなら、>ANo.3さんのを改良して、 function sizech(val) { var old_fsize = fsize; fsize = fsize + val; if(fsize < 40 ) { alert("これ以上小さくできません"); fsize = 40; return false; } if(fsize > 200) { alert("これ以上大きくできません"); fsize = 200; return false; } if(val == "0") fsize = 100; document.body.style.fontSize = fsize + "%"; var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = fsize + "%"; } var inputs = document.getElementsByTagName("input"); for(var i=0;i<inputs.length;i++){ inputs[i].style.width = inputs[i].offsetWidth * fsize / old_fsize + "px"; inputs[i].style.fontSize = fsize + "%"; } } みたいな感じです。ちなみに、こういった拡大縮小を使用する場合、positionを使うとデザインが崩れる原因になりますので、気をつけたほうがいいですよ。

質問者

お礼 2008/05/20 15:40

ご指導ありがとうございます。早速やってみましたが、確かにデザインが崩れてしまうのでちょっと考えてからにします。ありがとうございました。

yambejp
ベストアンサー率51% (3827/7415)

2008/05/20 12:51 回答No.2

あら申し訳ない document.body.style.fontSize = fsize + "%"; とご自身がかいている後ろの行に var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = fsize + "%"; } を追記してください

質問者

お礼 2008/05/20 13:17

ありがとうございました！できました！ }がひとつ抜けていました！！！本当にありがとうございました！

質問者

補足 2008/05/20 13:10

なんだかぼけた質問ばかりで何度も申し訳ありません。試してみましたが、ちょっとうまくいきませんでした。ちなみに、 <BODY> <DIV style="top : 50px;left : 50px; position : absolute; z-index : 1; " id="Layer1"> <DIV> <TABLE border="1" cellspacing="0" cellpadding="2" id="_HPB_TABLE_1_B_080520130845" class="hpb-cnt-tb2" width="443" height="160"> <TBODY> <TR> <TD class="hpb-cnt-tb-cell3">AAAAA</TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> </TR> <TR> <TD class="hpb-cnt-tb-cell3">BBBBB</TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> </TR> <TR> <TD class="hpb-cnt-tb-cell3"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> </TR> <TR> <TD class="hpb-cnt-tb-cell3"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> <TD class="hpb-cnt-tb-cell4"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV> </BODY> 具体的にご相談すると、このような表があったとき、その中の文字を拡大縮小をボタンでできるようにするにはどうしたらよいですか？図々しく質問攻めにしてしまって本当に恐縮ですが、お時間ございましたら宜しくご教授ください（＾－＾；）

yambejp
ベストアンサー率51% (3827/7415)

2008/05/20 12:08 回答No.1

テーブルは独自のルールでスタイルが設定されるようですね。 tdを拾ってfontSizeを変更してやればよいでしょう。 document.body.style.fontSize = fsize + "%"; var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = fsize + "%"; }

質問者

補足 2008/05/20 12:27

早速のご回答ありがとうございます。それなのに大変申し訳ないのですが、 javaにあまり詳しくないもので・・・上記のソースをどの部分に挿入したら良いでしょうか？詳しく教えていただけると大変助かります！

関連するQ&A

JavaScriptで電卓を作って一応完成はした
のですが、分からないコードがあります。以下のコードです。～HTML～ <form name="dentaku"> <input type="text" name="line" value="0"> <input type="button" value="Ｃ" onclick="cl()"> <input type="button" value=" ７ " onclick="val(7)"> <input type="button" value=" ８ " onclick="val(8)"> <input type="button" value=" ９ " onclick="val(9)"> <input type="button" value="÷" onclick="keisan('/')"> <input type="button" value=" ４ " onclick="val(4)"> <input type="button" value=" ５ " onclick="val(5)"> <input type="button" value=" ６ " onclick="val(6)"> <input type="button" value="×" onclick="keisan('*')"> <input type="button" value=" １ " onclick="val(1)"> <input type="button" value=" ２ " onclick="val(2)"> <input type="button" value=" ３ " onclick="val(3)"> <input type="button" value="－" onclick="keisan('-')"> <input type="button" value=" ０ " onclick="val(0)"> <input type="button" value=" ・ " onclick="val('.')"> <input type="button" value=" ＋ " onclick="keisan('+')"> <input type="button" value="＝" onclick="keisan('=')"> </form> ～JavaScript～ total = 0; input = ""; ope = "+"; flg = 1; function val(data) { flg = 0; input += data; document.dentaku.line.value = input; } function keisan(data) { if (flg == 0) { flg = 1; cf = total + ope + input; total = eval(cf); input = ""; document.dentaku.line.value = total; } if (data == "=") { total = 0; ope = "+"; } else { ope = data; } } function cl() { total = 0; ope = "+"; input = ""; document.dentaku.line.value = total; } 関係のないコードは省略してあります。また、CSSも省略しますが、テーブル要素を使わず以下の画像のようにインライン要素(input要素)の性質を利用して回り込みをさせています。長くなりましたが、そこで質問なのですが、 (1)変数ope(operandの略)なのですが、初期値は+なのに演算子ボタン(上記のHTMLコード)をクリックすると、なぜ値がその演算子に変わるのか理由を教えて下さい。何となく理由は分かりますが、はっきりと理解したいです。 (2)上記のHTMLコードをもっと簡単に書けませんか？特にonclickをボタンの数だけ書くのは手間です。
- ベストアンサー
- JavaScript
javascript クイズ
こちらの　http://okwave.jp/qa/q4105194.html 回答のNo.4の回答者様のソースコードなのですが <html> <head><style>.hid{display:none} .disp{display:block}</style></head> <body> <div id="s0">Start!!<input type="button" value="click" onClick="view();$('s0').className='hid';"></div> <div id="mn"></div> <div id="s1" class="hid"> Q1.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s2" class="hid"> Q2.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s3" class="hid"> Q3.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s4" class="hid"> Q4.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="s5" class="hid"> Q5.どれを選ぶ？ <input type="button" value="A" onClick="seikai()"> <input type="button" value="B" onClick="hazure()"> <input type="button" value="C" onClick="hazure()"> </div> <div id="hz" class="hid"> はずれでした！ <input type="button" value="次に進む" onClick="nextq()"> </div> <div id="sk" class="hid"> 正解です！ <input type="button" value="次に進む" onClick="nextq()"> </div> <script> var n=3; var q=5; var f=[]; var l=[]; var c=0; var cntc=0; window.onload=function(){ for(var i=0;i<n;i++){ do x=Math.floor(Math.random()*q)+1; while(f[x]) f[x]=true;l[i]=x; } } function view(){$('s'+l[c]).className='disp';$('mn').innerHTML=c+1+"問目";} function $(o){ return document.getElementById(o); } function hazure(){ $('hz').className='disp';} function seikai(){ $('sk').className='disp'; cntc++;} function nextq(){ $('sk').className='hid'; $('hz').className='hid'; $('s'+l[c]).className='hid'; if(++c>=n) owari(); else view(); } function owari(){ $('mn').innerHTML='正解数は、'+cntc; } </script> このままですと正解と不正解のボタンがそれぞれ一回ずつ押せてしまいますこれを正解、不正解のどちらか一回しか押せないようにするにはどうすればよろしいでしょうか？よろしくお願いします。
- ベストアンサー
- JavaScript
Javascriptを短くしたい
初歩的なことですみません。 Javascriptで表示／非表示を切り替えるものを作ろうと思うのですが、以下のサンプル文のような形では、項目数が増えるとその分だけどんどんJavascriptも長くなっていってしまいます。 Javascript文を簡潔にするには、どのように記述すればよいのでしょうか。よろしくお願いします。 <script type="text/javascript">  </script> <div id="cont1">ああああああ</div> <form> <input type="button" value="表示" onclick="Hyo1(0)"> <input type="button" value="非表示" onclick="Hyo1(1)"> </form> <form> <div id="cont2">いいいいいい</div> <input type="button" value="表示" onclick="Hyo2(0)"> <input type="button" value="非表示" onclick="Hyo2(1)"> </form>
- ベストアンサー
- JavaScript
javascriptで電卓を作成
プログラミングをまったくやったことがない状態から、ドットインストールやテックアカデミーのHTML,CSS,Javascriptの入門動画をすべて見終わった段階ですので、基本的な仕組みと関数やfor文、if文、while文、などについてくらいは理解しています。今回、javascriptを使って電卓のシステムを組む、という課題があり、ネットで検索してやってみてはいるのですが行き詰っています。最初は以下のような形で作成をしていました。 <body> <form name="myform"> 　<table border="1"> <tr> <td colspan="4"> <input type="text" name="result" value="" id="result"> </td> </tr> <tr> <td><input type="button" value="　"onclick="calc(' ')" ></td> <td><input type="button" value="％"onclick="calc('%')"></td> <td colspan="2"> <input type="button" value="AC" onclick="calc('AC')"></td> </tr> <tr> <td><input type="button" value="７" onclick="calc('７')"></td> <td><input type="button" value="８" onclick="calc('８')"></td> <td><input type="button" value="９" onclick="calc('９')"></td> <td><input type="button" value="÷" onclick="calc('÷')"></td> </tr> <tr> <td><input type="button" value="４"onclick="calc('４')" ></td> <td><input type="button" value="５"onclick="calc('５')" ></td> <td><input type="button" value="６"onclick="calc('６')"></td> <td><input type="button" value="×" onclick="calc('×')"></td> </tr> 　 <tr> <td><input type="button" value="１" onclick="calc('１')" ></td> <td><input type="button" value="２" onclick="calc('２')"></td> <td><input type="button" value="３" onclick="calc('３')"></td> <td><input type="button" value="－" onclick="calc('－')"></td> </tr> <tr> <td><input type="button" value="０" onclick="calc('０')" ></td> <td><input type="button" value="＋" onclick="calc('＋')"></td> <td colspan="2"> <input type="button" value="＝" onclick="calc('＝')"></td> </tr> </form> <script> function calc(a) { if (a === "=") { document.myform.kekka.value = eval(document.myform.kekka.value); } else if (a === "AC") { document.myform.kekka.value = ""; } else { document.myform.kekka.value += a; } </script> </body> </html> ですが、onclickとevalを使わず、代わりに「addEventListner」を用いるよう指示されました。「addEventListner」に関しては、検索してなんとかざっと理解したのですが、それ以前に、電卓の基本的な関数の組み方を理解していないため、いまいちどこから手をつけたらいいかわかりません。いろんなサイトを見ているといろんなやり方がでてきますが、ope=+,やflag=0などの表記をよく見かけます。が、この意味もいまいちわかっていません。。初心者すぎるので、何かアドバイスをいただけますと幸いです。宜しくお願いいたします。また、このような初心者が使いこなせるようになるために向いている動画や書籍、ページがありましたら教えていただけますと助かります。
- 締切済み
- JavaScript
テンキーで「0.1」を打つと「.1」になる
HTMLページにテンキーを打つと数字が出るといったものをしたくて、検索しましたところ、参考サイトを見つけました。 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q13197413368 「.」を追加したソースが下記になります。「0.1」とテンキーを打つと「.1」になってしまいます。「0.1」になる方法を教えて下さいますか？宜しくお願いします。 <style type="text/css">table { border: 0px; margin: 0 auto; border-collapse: collapse; } div#cc { text-align: center; } input { font-size: 12px; margin: 0; padding: 0; } input.key { width: 32px; font-family: monospace; font-size: 12px; } </style> </head> <body> <div id="cc"> <form name="myForm" action="#"> <input name="tx1" size=24 tabindex=1 maxlength=20 value="" onClick="selecttext(this)"><br> <input name="tx2" size=24 tabindex=2 maxlength=20 value="" onClick="selecttext(this)"><br> <input name="tx3" size=24 tabindex=3 maxlength=20 value="" onClick="selecttext(this)"><br> <hr> <table> <tr> <td><input type="button" class="key" value="7" onClick="keyEvent('7')"></td> <td><input type="button" class="key" value="8" onClick="keyEvent('8')"></td> <td><input type="button" class="key" value="9" onClick="keyEvent('9')"></td> </tr> <tr> <td><input type="button" class="key" value="4" onClick="keyEvent('4')"></td> <td><input type="button" class="key" value="5" onClick="keyEvent('5')"></td> <td><input type="button" class="key" value="6" onClick="keyEvent('6')"></td> </tr> <tr> <td><input type="button" class="key" value="1" onClick="keyEvent('1')"></td> <td><input type="button" class="key" value="2" onClick="keyEvent('2')"></td> <td><input type="button" class="key" value="3" onClick="keyEvent('3')"></td> </tr> <tr> <td><input type="button" class="key" value="0" onClick="keyEvent('0')"></td> <td><input type="button" class="key" value="." onClick="keyEvent('.')"></td> <td><input type="button" class="key" value="←" onclick="oneClear()"></td> <td><input type="button" class="key" value="CA" onclick="allClear()"></td> </tr> </table> </form> </div> <script type="text/javascript"> var t; selecttext(document.myForm.tx1); function selecttext(o) { t = o; } function keyEvent(c) { t.value = (t.value=='0')? c: t.value+c; } function allClear() { t.value = ''; } function oneClear() { t.value = t.value.substring(0,t.value.length-1); } </script> </body>
- ベストアンサー
- JavaScript
javascriptの計算結果をvalue=""に
javascriptの計算結果をフォームの中のvalue=""内部に表示し、送信できるようにしたいというのが質問の趣旨です。　　　　　　　　　　　　　　　　記下記の2つのファイルで、フォームから入力した数値同士の「足し算の結果」を表示できます。（HTMLファイル下段　<p id="message"></p>の部分で表示します。） ******************************************** 【HTML】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <p id="message"></p> ******************************************* 【JAVASCRIPT(culc.js)】 function readText() { var text1 = document.getElementById("text1"); var text2 = document.getElementById("text2"); var message = document.getElementById("message"); var str_val1 = text1.value; var str_val2 = text2.value; var sum; if (isNaN(str_val1) || str_val1 == "" || isNaN(str_val2) || str_val2 == "") { textMessage = "数値以外の文字が入っています"; } else { //sum = str_val1 + str_val2; sum = parseFloat(str_val1) + parseFloat(str_val2); textMessage = "合計は、" + sum + "です"; } message.innerHTML = textMessage; } ************************************************ 【質問】次にこのHTMLを改造し、フォームから計算値を送信することとしました。 ************************************************ 【HTML】 <script language="JavaScript" type="text/javascript" src="js/culc.js"></script> <form name="f1"> <input type="text" id="text1" name="text1" size="10" maxlength="10" />+ <input type="text" id="text2" name="text2" size="10" maxlength="10" /> <input type="button" value="足す" onclick="readText()" /> </form> <form action="form.cgi" method="post" name="form2" id="form2"> <input type="hidden" name="plus" value="<p id="message"></p>"> <input type="button" value="送信" onClick="disableButton()" name="button1"> </form> ************************************************ 問題点上記のように、計算結果を表示出来るはずの<p id="message"></p>を送信フォームのvalue=の直後に記載しただけなのですが、なぜか送れません。 <p id="message"></p>　を独立して記載しているときは計算値をそのまま表示していたのですが、value="<p id="message"></p>">　と　value=　の中に記載した瞬間に単なる文字の羅列になってしまうようです。 value="<p id="message"></p>"> value='<p id="message"></p>'> value="<p id='message'></p>"> value='<p id='message'></p>'> と試してみましたが、いずれもうまきませんでした。どのようにすれば、value=""　の中に計算結果が入るか教えてください。宜しくお願い致します。
- ベストアンサー
- JavaScript
画面（ウィンドウ）／画像の拡大縮小について
PHP/JavaScript初心者です。ＰＨＰとＪａｖａＳｃｒｉｐｔと以下のようなことをしてます、画面（ウィンドウ）上に画像が表示し「拡大」ボタンを押したらウィンドウ／画像を拡大して表示「リセット」ボタンを押したらウィンドウ／画像を元のサイズに戻してして表示をしたいのですが、どうすればいいですか？関連ありそうな、ソースを以下に書きます。 dspimg.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>文献表示</title> <meta http-equiv="Pragma" content="No-Cashe" /> <meta http-equiv="Cache-Control" content="No-Cache" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript">  </script> </head> <body> echo '<img id="dspimg" src="ppp.jpeg" alt="ppp.jpeg" width=600 height=400 " />'; <?php //拡大 ?> <INPUT type="button" Value="拡大" onclick="win_zoom(800,700)" > echo '<div align="center">'; <?php //リセット ?> <INPUT type="button" Value="リセット" onclick="win_reset(600,500)" > </div> </body> </html>
- ベストアンサー
- JavaScript
サイト検索窓の文字色を、触れる前と入力する時で色を変えようとしています
サイト検索窓の文字色を、触れる前と入力する時で色を変えようとしていますが、うまくいかずに非常に困っております。今のhtmlがこれです。 -------------------- <form name="myform" action="http://www～～" method="post"> <input type="text" name="search_name" value="サイト内検索" id="uid" onfocus="if (this.value == 'サイト内検索') { this.value='' }" onblur="if (this.value == '') { this.value='サイト内検索' }" /> <input type="submit" value="検索" name="button" id="btn" class="fadeBtn" /> </form> -------------------- cssで<input>のcolorを指定したら、入力する前の表示も、入力した時の表示も同じ色になりました。そこで、調べた結果以下のようにonfocusとonblurにcolorを指定したのですが、うまくいきませんでした。 -------------------- <form name="myform" action="http://www～～" method="post"> <input type="text" name="search_name" value="サイト内検索" id="uid" onfocus="if (this.value == 'サイト内検索') { this.value='' } { this.style='color:#000000' }" onblur="if (this.value == '') { this.style='color:pink' } { this.value='サイト内検索' }" /> <input type="submit" value="検索" name="button" id="btn" class="fadeBtn" /> </form> -------------------- javaが必要なのでしょうか？ javaには詳しくないため、必要でしたら教えていただきたいです。どうぞご回答お願いします・・・。
- ベストアンサー
- JavaScript
電卓のJavaScript
初心者で申し訳ないのですが、電卓のソースを作ってみたのですが、JavaScriptが間違っているためか「ページにエラーが発生しました」となり計算が行われません。どのように、改変すればいいのでしょうか？どうかご教授お願いします。 <html> <head> <title> 電卓 </title> <script language = "JavaScript"> count = 0; sum= 0; flag =0; list = new Array( "0", "0","0","0","0",); function clist( ) { for( i = 0 ; i < 5 ; i++ ) { list[i] =0; } } function calc1() { num = sum; clist( ); display.value = num; flag = 1; } function calc2() { num = sum; clist( ); display.value = num; flag = 2; } function calc3() { num = sum; clist( ); display.value = num; flag = 3; } function calc4() { num = sum; clist( ); display.value = num; flag = 4; } function calc5() { clist( ); } function equal() { if(flag==1) { sum=num+sum; display.value=sum; clist( ); } else if(flag==2) { sum=num-sum; display.value=sum; clist( ); } else if(flag==3) { sum=num*sum; display.value=sum; clist( ); } else if(flag==4) { sum=num/sum; display.value=sum; clist( ); } } function push0( ) { list[count] = 0; sum = list[count]; for( i = 0 ; i < count ; i++ ) { temp=1; for( j = i ; j < count ; j++ ) { temp=temp*10; } sum+ =list[i]*temp; } count+=1; display.value=sum; } function push1( ) { list[count] = 1; sum = list[count]; for( i = 0 ; i < count ; i++ ) { temp=1; for( j = i ; j < count ; j++ ) { temp=temp*10; } sum+ =list[i]*temp; } count+=1; display.value=sum; } 同様に２～９ </script> </head> <body> <hr><br> <input type = "button" value ="7" onclick = "push7()">&nbsp <input type = "button" value ="8" onclick = "push8()">&nbsp <input type = "button" value ="9" onclick = "push9()">&nbsp&nbsp <input type = "button" value ="+" onclick = "calc1()">&nbsp<br><br> <input type = "button" value ="4" onclick = "push4()">&nbsp <input type = "button" value ="5" onclick = "push5()">&nbsp <input type = "button" value ="6" onclick = "push6()">&nbsp&nbsp <input type = "button" value ="-" onclick = "calc2()">&nbsp<br><br> <input type = "button" value ="1" onclick = "push1()">&nbsp <input type = "button" value ="2" onclick = "push2()">&nbsp <input type = "button" value ="3" onclick = "push3()">&nbsp&nbsp <input type = "button" value ="×" onclick = "calc3()">&nbsp<br><br> <input type = "button" value ="0" onclick = "push0()">&nbsp <input type = "button" value ="=" onclick = "equal()">&nbsp <input type = "button" value ="C" onclick = "calc5()">&nbsp&nbsp <input type = "button" value ="÷" onclick = "calc4()">&nbsp<br><br> <br><br><hr><br>&nbsp&nbsp&nbsp <input type = "text" size ="10" name = "display">&nbsp <br><br><hr><br> </body> </html>
- ベストアンサー
- JavaScript
JavaScript ボタンで指定の箇所を変更する方法
よろしくお願いします。m(_ _)m 現在下記ソースの様なチェックボックスで出来たテーブルフォームを作成しております。【やりたい事】１．ボタンを作りたい水色(22BBFF)ボタンを1度押下すると紫色(CC55EE)に変わりもう1度押下すると赤色(FF3300)にもう1度押下すると水色(22BBFF)に戻る。（水色→紫色→赤色→水色→紫色→・・・）２．行単位・列単位で一括で変更したい縦１、または横１などのボタンを押下するとボタンに対する行or列のボタン全てが一括で変更されるようなものをつくりたいという事を行いたいと思い、色々調べてみたのですが、発見できませんでしたので質問させていただきました。どうかお助けください。m(>_<)m -- <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <TITLE></TITLE> </HEAD> <BODY> <form name="F1"> <table border="1"> <tr> <td>一覧</td> <td>縦1<br><input type="button" name="tate_btn001" id="x1y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(1)"/></td> <td>縦2<br><input type="button" name="tate_btn002" id="x2y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(2)"/></td> <td>縦3<br><input type="button" name="tate_btn003" id="x3y0" style="height:15px; width:15px; background-color:22bbff;" onClick="tate(3)"/></td> </tr> <tr> <td>横1 <input type="button" name="yoko_btn001" id="x0y1" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(1)"/> </td> <td><input type="button" name="btn001" id="x1y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn002" id="x2y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn003" id="x3y1" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> <tr> <td>横2 <input type="button" name="yoko_btn002" id="x0y2" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(2)"/> </td> <td><input type="button" name="btn004" id="x1y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn005" id="x2y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn006" id="x3y2" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> <tr> <td>横3 <input type="button" name="yoko_btn003" id="x0y3" style="height:15px; width:15px; background-color:22bbff;" onClick="yoko(3)"/> </td> <td><input type="button" name="btn007" id="x1y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn008" id="x2y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> <td><input type="button" name="btn009" id="x3y3" style="height:15px; width:15px; background-color:22bbff;" onclick="" /></td> </tr> </table> </form>
- ベストアンサー
- JavaScript

javascriptで文字を拡大・縮小させるには？