スタイルシートのフォントサイズの変更
- スタイルシートを使用してフォントサイズを変更する方法について調べています。
- 選択ボックスの数値を変更したときにスタイルシートのフォントサイズを変更する方法を知りたいです。
- スタイルシートのフォントサイズを10ptから50ptに変更する方法を教えてください。
- ベストアンサー
スタイルシートのフォントサイズの変更
下記のようなことをしたいのですが、簡単かと思ったものの下記より進みませんでした。 (^^; <STYLE TYPE="text/css"> <SCRIPT language=JavaScript> function set(n) ※選択ボックスの数値を変更したときにスタイルシートのフォントサイズを変更したい。 </SCRIPT> <!-- body { font-size:★pt } --> </STYLE> <SELECT NAME="moji" onchange="set()"> <OPTION SELECTED>10</OPTION> <OPTION VALUE="20"></OPTION> <OPTION VALUE="30"></OPTION> <OPTION VALUE="40"></OPTION> <OPTION VALUE="50"></OPTION> </SELECT>
- s-holmes
- お礼率47% (767/1609)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<STYLE TYPE="text/css"> <!-- body { font-size:5pt } --> </STYLE> <SCRIPT language=JavaScript> function set(n){ document.body.style.fontSize = n; } </SCRIPT> <BODY> <SELECT NAME="moji" onchange="set(this[this.selectedIndex].value)"> <OPTION SELECTED VALUE="10">10</OPTION> <OPTION VALUE="20">20</OPTION> <OPTION VALUE="30">30</OPTION> <OPTION VALUE="40">40</OPTION> <OPTION VALUE="50">50</OPTION> </SELECT> ※選択ボックスの数値を変更したときにスタイルシートのフォントサイズを変更したい。 </BODY>
関連するQ&A
- フォントサイズの変更(CSS、Javascript)
いつもお世話になっております。 スタイルシートで設定しているフォントサイズを、 <select>タグによるメニューにて、 任意のサイズに変更させる機能をつけたいと 考えています。 (メニューからフォントサイズを指定する) IEは問題ないのですが、NNだと、 まったくだめです。 NNで同じようにフォントサイズを変更するには、 どうすればよろしいのでしょうか？ 問題点*********************************** IE5.01、5.5だと、問題なく変更できました。 NN4.75で行うと、だめでした。 OSはWindows(98、2000、Me)です。 記述:*********************************** <head>タグ内 <script language = "javascript"> <!-- //親フレームから、現在のフォントサイズを取得。 var changeSize = parent.fontSize; var str = "<style type=\"text/css\">"; str += "body{font-size:" + changeSize + "}"; str += "</style>"; document.write(str); function changeFontSize(TargetFont){ var Sel=TargetFont.selectedIndex; var lclFontSize = TargetFont.options[Sel].value; //親フレームに変更後のサイズを格納 parent.fontSize = lclFontSize; location.reload(); } //--> </script> <body>タグ内 <select name="OP1" onChange="changeFontSize(this);"> <OPTION value="10">10pt</option> <OPTION value="20">20pt</option> <OPTION value="20">30pt</option> </select> ****************************************** 補足： メニューで選択されたフォントサイズを取得して、 ページをreloadします。 親フレームにフォントサイズを一度格納するのは、 他の子フレームすべてにフォントサイズを対応させるためです。
- 締切済み
- JavaScript
- 文字の書体＆サイズを変更する方法。
HP製作支援系のサイトを検索したのですが、 解決策が見つからなかったのでこちらにて質問致します。 テキスト系のサイトを作ろうと思っています。 閲覧者の方が自由に書体やフォントサイズを変更できるような記述を探していたところ、 --------------------------------------------------- ↓フォントサイズ変更 <select onchange="document.body.style.fontSize=this.value;"> <option value="12pt">12pt</option> <option value="11pt">11pt</option> <option value="10pt" selected>10pt</option> <option value="9pt">9pt</option> <option value="8pt">8pt</option> </select> ↓書体変更 <select onchange="document.body.style.fontFamily=this.value;"> <option value="Osaka" selected>Osaka</option> <option value="ＭＳ ゴシック">MSゴシック</option> <option value="ＭＳ 明朝">MS明朝</option> </select> --------------------------------------------------- といった同フレーム内の文字を変化させる記述を見つけました。 しかし、問題があります。 <b> <i> <a href="***"> 等のタグならば問題なく変更が適応されましたが、 <table> <input> <textarea> 等のタグになると変更が適応されず変化がありません。 変化の適応されないタグで囲まれた中の文章も適応させるには、 どのように記述を変更すればよいのでしょうか？ もしくは変化させる事は不可能なのでしょうか？ 将来的には別フレームでも同一の動作ができるようにしたいと思っております。 ご回答、よろしくお願い致します。
- ベストアンサー
- HTML
- リンク先にまで色変更されたままにしたいのですが。
以下のようなソースを入れ背景色を変更できるようにしました。 (フレーム１にこのソースを入れフレーム２を変更できるようにしました。) ですが、色変更してもＨＰ内の別のページに行ってしまうとまた、設定する前の状態に戻ってしまいます。 リンク先まで色変更を保ったままにしたいのですがどうすればいいでしょうか？全然わかりません。知ってる方いましたら教えてくださいお願いします。プログラムをどうすればいいのか教えていただけるとうれしいです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- function select1_onchange() { var s = select1.options(select1.selectedIndex).value; if (s == ""){return;} parent.frame2.document.bgColor = s; } //--> </SCRIPT> </HEAD> <BODY> <SELECT id=select1 style="WIDTH: 100px" name=select1 LANGUAGE=javascript onchange="return select1_onchange()"> <OPTION value="" selected>色変えます</OPTION> <OPTION value=red>赤</OPTION> <OPTION value=black>黒</OPTION> </SELECT></P> </BODY>
- ベストアンサー
- JavaScript
- 背景色変更
現在かなり困っています・・・。 フレームでウインドウを上下で区切って上の方のウインドウ内に以下のようなプログラムをいれ、背景色を簡単に変更できるようにしたのですが、これを上のウインドウ内ではなく下のウインドウないの背景を変えたいのですがどうすればいいのでしょうか・・？ つまり、上のウインドウないのリストボックスをいじることで、下の方のウインドウ内の背景色を変更したいのです。 知っている方がいらしたら教えてください。 具体的なプログラムを教えていただけたらうれしいです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE=javascript> <!-- function select1_onchange() { var s = select1.options(select1.selectedIndex).value; if (s == ""){return;} document.bgColor = s; } //--> </SCRIPT> </HEAD> <BODY> <SELECT id=select1 style="WIDTH: 100px" name=select1 LANGUAGE=javascript onchange="return select1_onchange()"> <OPTION value="" selected>色変えます</OPTION> <OPTION value=red>赤</OPTION> <OPTION value=black>黒</OPTION> </SELECT></P> </BODY>
- ベストアンサー
- HTML
- 入力フォームの文字の大きさとフォント種類を表示させたい
入力フォームの文字の大きさとフォント種類を 確認ボタンで画面上に表示させたいのですが、エラーになってしまいます。また、文字の大きさは反映されますが、フォントの種類は反映されません。どのようにすればいいでしょうか？ <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- // フォームの文字の大きさと種類を変更 function sizeTxt(n){ document.nForm.textN.style.fontSize = n.options[n.selectedIndex].value + "px"; } function fontTxt(n){ document.nForm.textN.style.fontFamily = n.options[n.selectedIndex].value; } function check(){ var strName; strName = document.nForm.textN.value; var test = document.getElementById("test"); test.innerHTML = strName; var strName2; strName2 = document.nForm.textN.value; var test2 = document.getElementById("test2"); test2.innerHTML = strName2; var size = document.nForm.sizeSelect; test.style.fontSize = size.options[size.selectedIndex].value + "px"; var element = document.nFORM.fontSelect; test2.style.fontFamily = element.options[element.selectedIndex].value; } </SCRIPT> </HEAD> <BODY> <FORM name="nForm" > フォントサイズを選択できます。<br> <SELECT onChange="sizeTxt(this)" name="sizeSelect"> <OPTION value="8">8px</OPTION> <OPTION value="10">10px</OPTION> <OPTION value="12" selected>12px</OPTION> <OPTION value="16">16px</OPTION> <OPTION value="20">20px</OPTION> <OPTION value="24">24px</OPTION> <OPTION value="30">30px</OPTION> </SELECT><br><br> フォント種類を選択できます。<br> <SELECT onChange="fontTxt(this)" name="fontSelect"> <OPTION value="ＭＳ ゴシック">ゴシック</OPTION> <OPTION value="ＭＳ 明朝" selected>明朝</OPTION> </SELECT><BR><BR> <INPUT type="text" size="45" name="textN"><BR> <input type="button" value=" 確認 " onClick="check()"> </FORM> <DIV id="test" id="test2" id=text style="position:absolute;font-size:24px;font-family: Verdana, sans-serif;"> </DIV> <SCRIPT language="JavaScript"> </SCRIPT> </BODY> </HTML>
- ベストアンサー
- JavaScript
- スタイルシートのチェンジをする方法を
スタイルシートのチェンジをする方法を http://allabout.co.jp/gm/gc/23930/5/ このページで知り、利用しようと思うのですが、 このページでスタイルシートの変更をする方法は プルダウン？の窓が出る形ですが、 <link rel="stylesheet" type="text/css" href="style.css" id="mystyle"> <script type="text/javascript"><!-- function changesytle(cssfile) { document.getElementById('mystyle').href = cssfile; } // --></script> スタイルの変更： <select onchange="changesytle(value);"> <option value="style.css">標準スタイル</option> <option value="red.css">赤系スタイル</option> <option value="blue.css">青系スタイル</option> <option value="sea.css">海スタイル</option> <option value="">スタイルなし</option> </select> これを★ボタンで選択★したり ★ダイアログの穴の形にして選択★する方法を教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- フォーム画面の文字を質問内容のように表示したい。
javascriptでフォントサイズが変更できるようにしたフォームに文字を入力し、そのフォーム画面を残したままその文字を変更したフォントサイズで表示したいのですが、 (1)確認ボタンを押すとフォーム画面が消えるのを消えないようにしたい。 (2)表示する文字のフォントサイズの変更の仕方がわからない。 以上の2点の解決方法をご教示下さい？ 宜しくお願いいたします。 <HTML> <HEAD> <STYLE type="text/css"> <!-- INPUT {font-size: 12px;} --> </STYLE> <SCRIPT language="JavaScript"> <!-- // フォームの文字の大きさを変更 function sizeTxt(n){ document.nForm.textN.style.fontSize = n.options[n.selectedIndex].value + "px"; } function check(){ var strName; strName = document.nForm.textN.value; document.write(strName); } //--> </SCRIPT> </HEAD> <BODY> フォントサイズを選択できます。 <FORM name="nForm"> <SELECT onChange="sizeTxt(this)"> <OPTION value="8">8px</OPTION> <OPTION value="10">10px</OPTION> <OPTION value="12" selected>12px</OPTION> <OPTION value="16">16px</OPTION> <OPTION value="20">20px</OPTION> <OPTION value="24">24px</OPTION> <OPTION value="30">30px</OPTION> </SELECT><BR><BR> <INPUT type="text" size="45" name="textN"><BR> <input type="button" value=" 確認 " onClick="check()"> </FORM> <SCRIPT language="JavaScript"> </SCRIPT> </BODY> </HTML>
- ベストアンサー
- JavaScript
- firefox3.6でJavaScriptが動かない
firefox2.xのころからだと思うのですが、 JavaScriptのOnChangeイベントが反応しません。 環境は、少し古いのですが、 ホームページビルダ１０です。 ホームページ上へコンボボックスを配置して０～４の値を選択するようにしています。 ソースは以下のようになっています。 ＝＝＝＝＝＝＝ <script language="JavaScript"> <!-- function Pent(formobj,pent0) { var v; v = eval(pent0.value); Pent.value = v; } //--> </script> <td valign="middle" height="28" width="13"><select size="1" style="font-size : 24px;" name="pent0" onchange="Pent(form,pent0)"> <option value="0" selected>0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select></td> ＝＝＝＝＝＝＝ このソースでIE6では問題なく選択できるのですが、 firefoxだとonchangeに反応していないようです。 対処方法をお教えください。
- ベストアンサー
- JavaScript
- プルダウンをもう一つ増やしたい＆フレームページで使用のため、別ウインドウで表示させたい
↓他サイトさんにてサンプルで置いてあったものを拝借して自分なりにやってみました。 １、これをさらにもうひとつプルダウンを選択させて他サイトへジャンプさせる場合はどのようにしたらよいですか。 ２、フレームページで使うので、他サイトの表示を別ウインドウで表示させたいのですが、どのようにしたらよいですか。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http:///www.w3.org/TR/html4/frameset.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <script type="text/javascript" language="JavaScript"> <!-- function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "inline"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">選んでください</option> <option value="item1"></option> <option value="item2"></option> <option value="item3"></option> </select> <select id="item1" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item2" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> <select id="item3" onchange="location=this.value"> <option selected="selected">選んでください</option> <option value=""></option> <option value=""></option> <option value=""></option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
- スタイルシートについて教えてください。
<style type="text/css"> <!-- .copy { font-size: 10pt} .privacy { font-size: 7pt} .news_midashi { font-size: 10pt; color: #333333} .news_honbun { font-size: 10pt} --> </style> という形で指定しています。IEで見たときは特に問題ないのですが、 Netscape6.0で見た場合、スタイルシートで決めたはずのテキストの 大きさが変更できるようになってしまいます。 この場合、どういった形で指定すればよいのでしょうか。 教えてください。
- ベストアンサー
- HTML
お礼
回答ありがとうございました。。 未熟ですみません。 (^^; >document.body.style.fontSize = n; なるほど。これがあやふやでした。 >onchange="set(this[this.selectedIndex].value)" この辺は、以前に利用したことはあるのですが、前者の部分で思考が停止していました。