JavaScriptを使い、文字の大中小を制御する方法

このQ&Aのポイント
  • JavaScriptを使い、文字の大中小を制御する方法を解説します。メインページで文字サイズを設定した場合、他のページでもその状態を継続する方法についてもご紹介します。
  • 初心者向けに、JavaScriptを使用して文字の大中小を制御する方法を解説します。また、メインページで設定した文字サイズを他のページでも維持する方法についてもご紹介します。
  • この記事では、JavaScriptを使用して文字の大中小を制御する方法について詳しく解説します。また、メインページでの文字サイズ設定を他のページでも反映させる方法についてもご紹介します。
回答を見る
  • ベストアンサー

全ページに有効にするには・・

webサイトを作成している初心者です。 質問するカテゴリーが間違っていたらすみません。 JavaScriptを使い、文字の【大】【中】【小】を制御するプログラムを作っています。 なんとかメインページ(idex.html)では、正常に動くようになりました。 しかし別のページにいくと、当然文字サイズは元に戻ってしまいます。 各ページに文字サイズ変更ボタンを置いてもみたんですが・・やっぱり変ですよね^^; メインページで設定したら、他のページでもその状態を継続するにはどうしたらいいでしょうか? お手数ですが、いい方法があればご教授ください。 ↓↓↓がソースになります。 【JavaScript】 function sizesetpt(val){     document.body.style.fontSize = val + "pt";     var tds=document.getElementsByTagName("td");     for(var i=0;i<tds.length;i++){         tds[i].style.fontSize = val + "pt";     } }; 【HTML】 <script type="text/javascript" src="js/test.js"></script> <form action="">     <img src="img/small.gif" onclick="sizesetpt(8)">     <img src="img/middle.gif" onclick="sizesetpt(10)">     <img src="img/big.gif" onclick="sizesetpt(12)"> </form>

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

クッキーに保存しておくのが常套手段ですね

noby_7423
質問者

お礼

回答ありがとうございます。 jquery.cookie.jsというファイルをダンロードしていろいろ試しています。 まだうまく動きませんがが、なんとか頑張ってみます。

関連するQ&A

  • 文字のサイズ変更について

    ホームページ作成初心者です。 javaにてホームページの文字サイズを制御しています。 Javaは <script type="text/javascript"><!-- fsize = 12; function sizesetpt(val){ document.body.style.fontSize = val + "px"; var tds=document.getElementsByTagName("td"); for(var i=0;i<tds.length;i++){ tds[i].style.fontSize = val + "px"; } } //--> </script> という風に書いています。 HTML内に <form action=""> <img src="image/small.gif" width="28" height="28" onclick=""sizesetpt(10)"> <img src="image/middle.gif" width="28" height="28" onclick=""sizesetpt(12)"> <img src="image/big.gif" width="28" height="28" onclick=""sizesetpt(14)"></form> と書いています。 一応問題無く動いていますが、可能であれば 「今は小サイズの文字で見ていますよ」というのがわかるように 小サイズ表示になっている時には文字小のボタン画像を別の画像に変更したいと思っています。 (例) 白地に黒字の「小」ボタン(画像)を押す ↓ ページが文字小サイズ表記になる ↓ その時はボタンは黒地に白字の「小」ボタン(画像)になっている そのような操作はできるのでしょうか? もし出来るのであればやり方をお教え頂けると助かります。 イメージとしては以下のサイトのような感じです。 もっと複雑なjavaやCSSを使うのでしょうか? http://www.n-kankyo.com/ よろしくお願いします。

  • JavaScriptでサイコロのようなものを作成しています。

    JavaScriptでサイコロのようなものを作成しています。 スタートボタンで"数字の画像"(diceX.gif)が順に入れ替わって、ストップボタンで止まる、というものなのですが、 この画像数字の入れ替わる範囲を"1-2の間で、1-3の間で・・・"というように変化させたく思っています。 現状は下記のように別々に並べて画像、スタート.ストップが表示されるよういなっていまが、 これをセレクトメニューで「2」を選択した場合は1-2の、「3」を選択した場合には1-3..の間での変化と 1つの画像、ボタン表示で済むようにしたいのですが、どのように記述すればよいのでしょうか? こういったものを作成するのは初めてで、様々なサイトを参考になんとかここまでこぎ着けましたがどうにも行き詰まってしまいました なにとぞ宜しくお願いいたします。 <SCRIPT LANGUAGE="JavaScript"> <!-- var myImage1 = new Image(); myImage1.src = "dice1.gif"; var myImage2 = new Image(); myImage2.src = "dice2.gif"; var myImage3 = new Image(); myImage3.src = "dice3.gif"; ・ ・ ・ var img =0; fileName = new Array("dice1.gif","dice2.gif","dice3.gif",・・・); function rotate2() { img = Math.floor(Math.random()*2); document.images["dice2"].src = fileName[img]; timer = setTimeout("rotate2()",30); } function stop2() { clearTimeout(timer); } function rotate3() { img = Math.floor(Math.random()*3); document.images["dice3"].src = fileName[img]; timer = setTimeout("rotate3()",30); } function stop3() { clearTimeout(timer); } ・ ・ ・ </SCRIPT> <BODY> <IMG src="dice2.gif" name="dice2"> <FORM action="javascript://"> <INPUT TYPE="submit" VALUE="start" onClick="rotate2()"> <INPUT TYPE="submit" VALUE="stop" onClick="stop2()"> </FORM> <IMG src="dice3.gif" name="dice3"> <FORM action="javascript://"> <INPUT TYPE="submit" VALUE="start" onClick="rotate3()"> <INPUT TYPE="submit" VALUE="stop" onClick="stop3()"> </FORM> ・ ・ ・

  • 選択したformの名前を取得する方法

    いくつもあるフォームからクリックされたフォーム名を参照する方法をどなたか教えて下さい。 下のスクリプトが間違っていたり(といいつつ、既に動かないので間違いです)、はじめから出来ないことであればご容赦下さい。 下のスクリプトはフォーム名の取得をするためだけにに書いているものです。 <SCRIPT language="JavaScript"> <!-- function move() {   for(i=0;i<30;i++) { var check="form"+i; if(check==document.forms[i].name) { return document.write("これは→"+check+"です");     }   } } --> <body> <FORM name="form0"><input type="image" src="back.gif" onclick="move()"></form> <FORM name="form1"><input type="image" src="back.gif" onclick="move()"></form> <FORM name="form2"><input type="image" src="back.gif" onclick="move()"></form> ・ ・ ・ <FORM name="form29"><input type="image" src="back.gif" onclick="move()"></form> </body>

  • 【Javascript】外部scriptファイルを同一ページ内に埋め込むことは出来ますか【はてなダイアリー】

    QNo.3191576がカテゴリミスでしたので,JavaScriptカテゴリにて新しく立てさせていただきます.乱立申し訳ありません. Javascriptを同一htmlページ内に複数埋め込むことが出来ないかどうかで悩んでいます. はてなスターscript(http://s.hatena.ne.jp/js/HatenaStar.js)の一部改変したスクリプトを,自前のサーバーに保存したもの(仮にA.jsとB.jsとします)をはてなダイアリー(http://d.hatena.ne.jp)の同一ページ内に埋め込みたいのですが,これは無理でしょうか. 具体的には, /* Hatena.Star.AddButton */ Hatena.Star.AddButton = new Ten.Class({ base: ['Hatena.Star.Button'], initialize: function(entry) { this.entry = entry; this.lastPosition = null; var img = Hatena.Star.Button.createButton({ src: Hatena.Star.AddButton.ImgSrc, alt: 'Add S tar' }); this.observer = new Ten.Observer(img,'onclick',this,'addStar'); this.img = img; return img; }, ImgSrc: Hatena.Star.BaseURL + 'images/add.gif' の部分を, A.js … 'http://xxx.yyy.ne.jp/a.gif' B.js … 'http://xxx.yyy.ne.jp/b.gif' のようにして,2つの場合分けをしたいと考えています. Javascriptのことは分かりませんがこういうことが出来るのかな,と疑問に思ったのでどなたか教えていただけませんでしょうか.

  • 外部ファイルにした時の引継ぎについて…

    jQueryに関するJavaScriptに関する質問です。 ■以下のサイトで文字の大きさの変更についてのスクリプトがあり、自サイトに取り入れようと試みました。 ▼ http://www.lllcolor.com/jQuery/demo/demo01b.html 該当ページにてjavascriptに関する記述を直接入力した場合には問題なく動作するのですが、少々スクリプトが長いのもあり外部ファイルにしようとした場合に動作が行えません。 何か書き足さなければならないものがあるのでしょうか? <HRAD>内には以下のタグが記入されております。 <SCRIPT type="text/javascript" src="jquery.js"></SCRIPT> <SCRIPT type="text/javascript" src="common.js"></SCRIPT> ※common.jsは該当スクリプトを外部ファイルにした時の名称です。 ■ページ内の文字を変換する部分には、以下の記述があります。 <a href="#" class="sizeL"><IMG src="img/common/font_l.gif" width="20" height="20" border="0"></a> <a href="#" class="sizeM"><IMG src="img/common/font_m.gif" width="20" height="20" border="0"></a> <a href="#" class="sizeS"><IMG src="img/common/font_s.gif" width="20" height="20" border="0"></a> JavaScriptに関しては殆ど初心者です。 自身では色々なサイトを閲覧し、試行錯誤でスクリプトの先頭にに、$(function fontsize(){ と書き足し、ページ内の記述に<a href="#" class="sizeL" id="fontsize"> としてみたりと訳の分からない事に挑戦してみましたが一向に無駄でした(泣) どなたか、ご教授を頂ければ幸いです。 宜しくお願いします。

  • cgiへのパラメータについて

    htmlのformで入力した名前をcgiで受け取ると"encstr"となります。 エンコードした文字列を受け取るにはどのようにすれば良いか教えてください。 <form name="js"> お名前:<input type="text" name="txtb" value=""><br> <input type="button" value="送信" onclick="gogo()"><br> </form> <script type="text/javascript" language="javascript"> <!-- function gogo() { var str1=document.js.txtb.value; var encstr = encodeURI(str1); document.write('<img src="/cgi-bin/gogo.cgi?namae=encstr">'); } // --> </script>

  • 外部 .js で動かないものが出てきてしまいました

    外部 .js への移行に伴い、動かないものがあります。エラは「未定義の変数です: rollover」、および「スクリプトで呼び出しているソースが見つかりません。」。 test.html、test.js、および画像はすべて同じディレクトリに置いています。 (test.js) window.onload = function loadImage() { var rollover = new Array(3); for (var i = 0; i < 3 ; i++) { rollover[i] = new Image(); } rollover[0].src = "image-1-x.gif"; rollover[1].src = "image-2-x.gif"; rollover[2].src = "image-3-x.gif"; } または function loadImage() { var rollover = new Array(3); for (var i = 0; i < 3 ; i++) { rollover[i] = new Image(); } rollover[0].src = "image-1-x.gif"; rollover[1].src = "image-2-x.gif"; rollover[2].src = "image-3-x.gif"; } window.onload = loadImage; (test.html) <html> <head> <script type="text/javascript" src="test.js"></script> </head> <body> <a onmouseover="image-1.src=rollover[0].src; return true;" onmouseout="image-1.src='image-1-y.gif'; return true;" href="page-1.htm"><img name="image-1" src="image-1-y.gif" alt="Page 1"></img></a> <a onmouseover="image-2.src=rollover[1].src; return true;" onmouseout="image-2.src='image-2-y.gif'; return true;" href="page-2.htm"><img name="image-2" src="image-2-y.gif" alt="Page 2"></img></a> <a onmouseover="image-3.src=rollover[2].src; return true;" onmouseout="image-3.src='image-3-y.gif'; return true;" href="page-3.htm"><img name="image-3" src="image-3-y.gif" alt="Page 3"></img></a> </body> </html>

  • onclickで呼び出す関数の引数を・・・

    質問させていただきます。 prototype.jsを使って, function hoge(){  AJAXで画像ファイル名img_name[i]を取得、 取得画像が無ければimg_name[i]はnull; for(i=1;i<5;i++){ if(img_name[i]){ $("img_"+i).onclick=function(){sample(i)}; $("img_"+i).src=img_name[i]; }else{ $("img_"+i).onclick=null; $("img_"+i).src="no_img.gif"; } } } function sample(row){ 略; } という関数を作り、 htmlに <img id="img_1" src="aa.gif" onclick=""> <img id="img_2" src="bb.gif" onclick=""> というAJAXの結果で画像リストが変化し、画像がクリックできる プログラムを作りました。 しかしsampleに入ってくる引数が、どの画像をクリックしても iの最大値4になってしまいます。 予定ではクリックした画像によって引数が変わるはずなのですが・・・ どなたかご教授できる方宜しくお願い致します。

  • JavaScript(?)で入替えた画像をクリッカブルマップにする方法

    件名の通り、JSで入替えた画像をクリッカブルマップにしたいのです。一応画像の入替えはコントロールできるようになったのですが、入替え後のイメージを<MAP>制御したいのですが・・・方法がわからない・・・どうか教えて下さい。 ソース(抜粋) <SCRIPT Language="JavaScript"> <!-- function ImgSwap(imgName, imgSrc){ var appVer=parseInt(navigator.appVersion); var isNC=(document.layers && (appVer >= 4)); var isIE=(document.all && (appVer >= 4)); if (isNC || isIE){ if (document.images){ var img = document.images[imgName]; if (!img) img = ImgFind(document, imgName); if (img) img.src = imgSrc; } } } //--></SCRIPT> ・ ・ <TR><TD align="center" valign="top" height="165" background="../img/tv-frame.gif"> <IMG src="../img/off.gif" name="TV" border="0"> </TD></TR> <TR><TD align="center" valign="top"> <FORM><INPUT type="button" value="Top" name="top" onclick="ImgSwap('TV', '../img/top.gif')"><INPUT type="button" value="40's" name="40's" onclick="ImgSwap('TV', '../img/40s.gif')"><INPUT type="button" value="50's" name="50's" onclick="ImgSwap('TV', '../img/40s.gif')"></FORM> </TD></TR> この40sないし50sというGIFに<MAP>制御を施したいのです・・・御指導宜しく御願いします。

  • 文字の大きさを変更するjavascriptについて

    文字の大きさを変更するjavascriptについての質問です。 現在以下のようなスクリプトを使用しているのですが、 IE6では動作しますがFirefox2.0では動きません。 原因、アドバイス等あればご指摘お願いします。 *****このスクリプトを外部ファイルとして読み込んでいます***** function larger(){ content_area.style.fontSize="14pt"; } function standard(){ content_area.style.fontSize="12pt"; } function smaller(){ content_area.style.fontSize="9pt"; } *********************************************************** *****head内の外部js読み込み部分***** <script type="text/JavaScript" src="common/js/fontsize.js"></script> ************************************ *****body内のjavascript呼び出し部分***** <ul> <li class="text_large"><a href="javascript:larger()">文字サイズ大</a></li> <li class="text_mid"><a href="javascript:standard()">文字サイズ中</a></li> <li class="text_small"><a href="javascript:smaller()">文字サイズ小</a></li> </ul> **************************************** よろしくお願いします。

専門家に質問してみよう