javascriptでの文字の可変について

2023/10/22 10:29

このQ&Aのポイント

サイト全体に、javascriptでテキストの可変の設定をしていますが、なぜかMacの「Safari」だけ反応しません。
設定は下記のようにしてあります。#fontSizeSelect .btn { cursor:pointer; } .variableTxt01 { font-size:130%!important; } <img class="btn" src="../common/img/img_font_l.gif" width="28" height="23" alt="大" onClick="setActiveStyleSheet('fontSizeL');" />
他にもタグが必要なのでしょうか。よろしければ、アドバイスよろしくお願い致します。m(_ _)m

ベストアンサー

javascriptでの、文字の可変の仕方について

2011/10/18 16:31

サイト全体に、javascriptでテキストの（「小」「中」「大」など。）可変の設定をしていますが、なぜかMacの「Safari」だけ反応しません。 WindowsのIE、Firefox、MacのFirefoxは可変します。設定は下記のようにしてあります。 ◆common.css #fontSizeSelect .btn { cursor:pointer; } ◆fontsize_l.css .variableTxt01 { font-size:130%!important; } ◆htmlのボタンの設定 <img class="btn" src="../common/img/img_font_l.gif" width="28" height="23" alt="大" onClick="setActiveStyleSheet('fontSizeL');" /> 他にもタグが必要なのでしょうか。よろしければ、アドバイスよろしくお願い致します。m(_ _)m

zigaru
お礼率86% (25/29)

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

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

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

ベストアンサー

JaneDue
ベストアンサー率75% (263/350)

2011/10/18 21:16 回答No.1

単にそのjavaScript がsafariに対応していないだけでは? ダウンロードしたのであれば、そのサイトのデモもSafariで確認してみてください。そこでも動かない場合は、そのJavaScriptのせいです。

質問者

お礼 2011/10/19 12:56

自分で作ったのでないので、そのサイトがわからないのですが・・・おそらく、もともとの設定かもしれませんね。回答どうもありがとうございました。m(_ _)m

関連するQ&A

文字サイズ変更のjavascriptが動かない
現在、サイトを文字サイズ変更できるようにトライしているのですが、javascriptは全くの初心者なのでよくわかりません。ページによって動かないので、何がいけないのかアドバイスお願いします！動くのは http://○○.jp/○○.html 動かないのは　http://○○.jp/○○/○○.html　のページです。以下の記述は動かない方に設定しているものです。 ************* javascript ************* function imgver(num){ var element =document.getElementById("fontSize"); var writeHtml = ''; if( num == 0){ writeHtml +='<li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li>'; } else{ writeHtml +='<li><a href="javascript:void(0)" onclick="font(\'16px\');imgver(0)"><img src="../common/l.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'12px\');imgver(1)"><img src="../common/m.png" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font(\'9px\');imgver(2)"><img src="../common/s.png" width="25" height="26" border="0" /></a></li>'; } element.innerHTML = writeHtml; } ************* html ************* <ul id="fontSize"><li><a href="javascript:void(0)" onclick="font('16px');imgver(0)"><img src="../common/l.png" alt="大" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font('12px');imgver(1)"><img src="../common/m.png" alt="中" width="25" height="26" border="0" /></a></li><li><a href="javascript:void(0)" onclick="font('9px');imgver(2)"><img src="../common/s.png" alt="小" width="25" height="26" border="0" /></a></li></ul> ******************************************** 画像は表示されるのですが、全く動きません。よろしくお願いします！
- 締切済み
- JavaScript
fontsize.jsでhtmlの大中小の設定を行っているのですが、ど
fontsize.jsでhtmlの大中小の設定を行っているのですが、どうしても大きさをデザイン上変更したくない文字の処理がわからなく困っております。以下の設定なのですが、ヘッダー等に大きくすると崩れてしまう箇所があったり、 tableの中でも同様な箇所を変更しないようにしたいのです。【html】 <p class="mess2"><img src="../common/images/title_size.gif" alt="サイズ" /><a href="#" id="smallLink"><img src="../common/images/bu_small.gif" alt="" id="small" /></a><a href="#" id="middleLink"><img src="../common/images/bu_middle_o.gif" alt="" id="middle" /></a><a href="#" id="largeLink"><img src="../common/images/bu_large.gif" alt="" id="large" /></a></p> JSファイルの設定箇所以下のほかにクッキーの処理、画像の処理、初期化の処理、load時の処理が記載 var now_size = 'middle'; // フォントサイズを小に変更 function smallFontSize(){ var size = "small"; setFontSize(size); changeImage(size); setCookie("@fontsize", size); } // フォントサイズを中に変更 function middleFontSize(){ var size = "middle"; setFontSize(size); changeImage(size); setCookie("@fontsize", size); } // フォントサイズを大に変更 function largeFontSize(){ var size = "large"; setFontSize(size); changeImage(size); setCookie("@fontsize", size); } // 指定されたフォントサイズに変更する function setFontSize(size){ var fontSize; var smallFontSize; switch(size){ case "small": fontSize = '11px'; smallFontSize = '10px'; break; case "middle": fontSize = '12px'; smallFontSize = '11px'; break; case "large": fontSize = '14px'; smallFontSize = '12px'; break; } $('a,p,td,th,li,dt,dd,pre').css("font-size", fontSize); $('.smallText *').css("font-size", smallFontSize); }
- ベストアンサー
- JavaScript
javascriptで文字を拡大・縮小させるには？
最近、アクセシビリティを考慮して、ブラウザの機能上だけでなく、 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>
- ベストアンサー
- JavaScript
文字サイズを変更できない
web制作していて、文字サイズ変更の機能をつけました。 * * * * * * * * * * * * * * * * <div id="fsize"> <div><a id="fsize_l" onclick="document.body.style.fontSize='large'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ　大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='small'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ　中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='x-small'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ　小" width="29" height="25" /></a></div> </div> * * * * * * * * * * * * * * * * IEとfirefoxで確認したところ、問題なくサイズ変更されていたんですが、制作を進めていったら、いきなり変更しない箇所がでてきてしまいました。全体のフォント指定はemでやっています。何が原因なのでしょうか？言葉足らずな部分があるかもしれませんが、どうぞよろしくお願いします。
- ベストアンサー
- HTML
文字のサイズ変更について
ホームページ作成初心者です。 javaにてホームページの文字サイズを制御しています。 Javaは <script type="text/javascript"> </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で文字サイズの変更
HP初心者です。書籍通りに作ってみてのですが文字は変更されるのですが、作った大中小の画像？までクリックするとズレてしまいます。文字だけが変更されるのを希望してます。 ↓見てやって下さい http://www.d-judge.jp/d-judge/test.html ソースは HTML↓ <div id="header"> <div class="font_size"> <ul> <li><img src="images/txt_size.gif" alt="文字サイズ" width="68" height="14" /></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('l')" class="textL"><span>大</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('m')" class="textM"><span>中</span></a></li> <li><a href="javascript:void(0);" onclick="javascript:changeFsize('s')" class="textS"><span>小</span></a></li> </ul> </div> <p>ああああああテストです。</p> </div> css↓ /* 文字サイズ ----------------------------*/ #header .font_size { margin: 2.5em 0px 0px; position: absolute; left: 86px; top: -2px; width: 250px; text-align: right; height: 24px; } #header .font_size li { padding: 0px 0px 0px 1em; float: left; list-style: none; } #header .font_size li img { margin-top: 5px 0; } #header .font_size ul li a { height: 24px; width: 24px; display: block; } #header .font_size ul li a span { display: none; } #header .font_size ul li .textL:link, #header .font_size ul li .textL:visited, #header .font_size ul li .textL:active { background-image: url(images/text_L.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textL:hover { background-image: url(images/text_L_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:link, #header .font_size ul li .textM:visited, #header .font_size ul li .textM:active { background-image: url(images/text_M.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textM:hover { background-image: url(images/text_M_o.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:link, #header .font_size ul li .textS:visited, #header .font_size ul li .textS:active { background-image: url(images/text_S.gif); background-repeat: no-repeat; background-position: left top; } #header .font_size ul li .textS:hover { background-image: url(images/text_S_o.gif); background-repeat: no-repeat; background-position: left top; } javascript↓ /*フォントサイズ変更*/ function changeFsize(fontsize) { var change = document.getElementsByTagName("body")[0]; switch(fontsize) { case "s": var percent = "62.5%"; break; case "m": var percent = "75%"; break; case "l": var percent = "85%"; break; } change.style.fontSize = percent; } です。どなたかお分かりになる方宜しくお願いしますm(＿＿ )m
- ベストアンサー
- JavaScript
引数を2個使いたい場合　Javascript
こんにちは。 Javascriptについてアドバイスお願いします。 ■やりたいこと「普通」「大きい」と言うテキスト画像をクリックすることでCSSを入れ替える。・外部JSにしたい・<input>のボタンではなく画像を使う・一つのページで使うCSSは2種類（共通.cssと各頁ごとの設定用）作ってみたスクリプトは下記の通りです。 function chooseCSS(csstype,cssname){ if(csstype == "normal"){ document.getElementById("baseCSS").href = "base.css"; document.getElementById("eachCSS").href = cssname + ".css";} else{ document.getElementById("baseCSS").href = "base2.css"; document.getElementById("eachCSS").href = cssname+"2.css";} } --------------------------------------------- HTMLの記述 ☆head内 <link href="base.css" rel="stylesheet" type="text/css"> <link href="base.css" rel="stylesheet" type="text/css" id="baseCSS"> <link href="top.css" rel="stylesheet" type="text/css"> <link href="top.css" rel="stylesheet" type="text/css" id="eachCSS"> ☆body内 <a href="javascript:void(0)" onClick="chooseCSS('normal','top')"><img src="img/btn01.gif" border="0" class="normal"></a> <a href="javascript:void(0)" onClick="chooseCSS('big','top')"><img src="img/btne02.gif"　border="0" class="big"></a> --------------------------------------------- ローカルでは動いていたのでサーバーにUPしたらネスケとsafariは動作するのにIE（JSの設定は有効になっていました）だけ動かなくなりました。あまりJavascriptは得意ではないのでどなたかアドバイスお願いいたします！
- ベストアンサー
- JavaScript
文字サイズ変更ボタンでサイズが思うように制御できません
文字サイズ変更ボタンを配置して、下記のhtmlで大中小に変えられるようにしています。 <div><a id="fsize_l" onclick="document.body.style.fontSize='130%'" href="javascript:void(0);"><img src="../../images/b_fsize_l.jpg" alt="文字サイズ　大" width="85" height="25" /></a></div> <div><a id="fsize_m" onclick="document.body.style.fontSize='100%'" href="javascript:void(0);"><img src="../../images/b_fsize_m.jpg" alt="文字サイズ　中" width="19" height="25" /></a></div> <div><a id="fsize_s" onclick="document.body.style.fontSize='70%'" href="javascript:void(0);"><img src="../../images/b_fsize_s.jpg" alt="文字サイズ　小" width="29" height="25" /></a></div> 元々の文字サイズは％で制御しているのですが、大→中（＝標準）に戻した時、元々のサイズとは異なるサイズになってしまいます。どうしてでしょうか？標準サイズを100％とし、中サイズも100％と記述しています。
- ベストアンサー
- HTML
ページ内に複数のJQueryスライドを設置したいが
JQuery勉強中の初心者です。１ページ内に同じタイプのスライドショーを４つ設置しようとしていますが、上手く表示されません。使用しているのは、Galleriaのクラッシックデーマ（下記URLと同一のもの）です。 http://galleria.io/themes/classic/ これをJQueryでオーバーレイさせ、オーバーレイ表示上にGalleriaのスライドを設置しています。ページ内にはギャラリーを表示するための４つの画像ボタンがあり、そのボタンをクリックすると、オーバーレイ表示上にそれぞれ違うスライドを表示します。下記のソースのような記述をしています（文字数の関係で、下記ソースの画像ボタンは２つにしています。）。しかし、<div id="btn1">～</div>をクリックすると、オーバーレイ表示上にギャラリーが表示されることはされるのですが、５秒後ぐらいにギャラリー画面上に「Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.」と表示されます。どうしてもこのスライドショーを使用したいので、お盆休み中に格闘しましたが、どなたか分かる方がおられましたら、解決方法をお教えいただけないでしょうか。何卒よろしくお願いします。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" id="camera-css" href="../common/css/galleria.classic.css" media="all"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script> <script src="../common/js/galleria-1.2.9.min.js"></script> <script> /* オーバーレイ表示用のcss */ <style type="text/css"> #btn1,#btn2 { display:block; width: 420px; height: 281px; cursor: pointer; } #overlay1,#overlay2 { display: none; width: 100%; height:100%; position: fixed; top: 0; z-index: 100; background: rgba(0,0,0,0.8); } #close1,#close2 { width: 80px; cursor: pointer; position:absolute; top:50px; right:0; } </style> </head> <body> <div id="overlay1">　/* オーバーレイ用のボックス */ <div id="galleria">　/* １つ目のスライドショー用のボックス */ <a href="../common/img/photo/t1.jpg"><img src="../common/img/photo/thumb/t1.jpg",data-big="../common/img/photo/t1.jpg"></a> <a href="../common/img/photo/t2.jpg"><img src="../common/img/photo/thumb/t2.jpg",data-big="../common/img/photo/t2.jpg"></a> <a href="../common/img/photo/t3.jpg"><img src="../common/img/photo/thumb/t3.jpg",data-big="../common/img/photo/t3.jpg"></a> </div> <p id="close1"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div> <div id="overlay2">　/* オーバーレイ用のボックス */ <div id="galleria1">　/* ２つ目のスライドショー用のボックス */ <a href="../common/img/photo/s1.jpg"><img src="../common/img/photo/thumb/s1.jpg",data-big="../common/img/photo/s1.jpg"></a> <a href="../common/img/photo/s2.jpg"><img src="../common/img/photo/thumb/s2.jpg",data-big="../common/img/photo/s2.jpg"></a> <a href="../common/img/photo/s3.jpg"><img src="../common/img/photo/thumb/s3.jpg",data-big="../common/img/photo/s3.jpg"></a> </div> <p id="close2"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div> /* オーバーレイ用と、オーバーレイ表示を閉じるボタン用のスクリプト */ <script type="text/javascript"> $(function() { $("#btn1").click(function() { $("#overlay1").fadeIn(); }); $("#btn2").click(function() { $("#overlay2").fadeIn(); }); $("#close1").click(function() { $("#overlay1").fadeOut(); }); $("#close2").click(function() { $("#overlay2").fadeOut(); }); }); </script> /* ギャラリーをオーバーレイ表示するためのボタン */ <div id="container" class="clearfix"> <div id="btn1"><img src="../common/img/photograph/no1_tbt.jpg" alt="" class="item"></div> <div id="btn2"><img src="../common/img/photograph/no2_bali.jpg" alt="" class="item"></div> </div> /* ギャラリー用オプション＆JQuery呼び出し用 */ <script> // Load the classic theme Galleria.loadTheme('../common/js/galleria.classic.min.js'); option = { width: 900, // 幅 height: 600, // 高さ imageCrop: false, // 画像のクロップ有無 // true：width/heightにフィットさせるように画像を切り取って表示 // false：画像を全体表示させるように縮小 transition: 'fade', // 画像の遷移イフェクト _toggleInfo: false, // imgのalt属性を取得してキャプションとして表示 // true：キャプションの非表示 // false：キャプションの表示 } // Initialize Galleria Galleria.run('#galleria',option); Galleria.run('#galleria1',option);　/* ←idを分けてみたりしました。 */ </script>
- 締切済み
- JavaScript
CSSで文字サイズを固定
ホームページ作成中です。ページレイアウトを誰でも同じように見せたいため文字サイズを固定しようと思います。でも、うまく出来ません。 CSSファイルを別に準備する方法でやっています。 ---------- BODY { color : #666666; font-size: 12px; background-image : url(img/bg.gif); } ---------- こうしてみたのですが、ブラウザで大とか小とかにすると変化してしまいます。 CSSを読み込んでないのかな?と思ってカラーを書き換えてみたのですが、こちらはちゃんと変化します。何が間違っているのでしょう?
- ベストアンサー
- CSS

javascriptでの文字の可変について

javascriptでの、文字の可変の仕方について

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

お礼 2011/10/19 12:56

関連するQ&A

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

javascriptでの文字の可変について

javascriptでの、文字の可変の仕方について

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

お礼 2011/10/19 12:56

関連するQ&A

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

カテゴリ
一覧

専門家に質問してみよう
専門家登録