• 締切済み

id 及び class の指定についてです。

中途半端な知識で対応できず、苦しんでおります。 下のJavaScriptは、jquery.cookie.js 使用で <p>タグ内の文字のフォントサイズを変更しているのですが… <p>の指定を、idやclass の指定にするには、どう書き換えたら良いのでしょうか？ <script type="text/javascript"> <!-- $(function(){ $("p").css("font-size",$.cookie('fsize')); }); function font(size){ $("p").css("font-size",size); $.cookie("fsize",size,{expires:30,path:'/'}); } //--> </script> ちなみに、分かりやすく詳しく教えて頂けると非常に助かります。 もし宜しければ何方か教えて下さい。宜しくお願いします。

みんなの回答

  • Gletscher
  • ベストアンサー率23% (1525/6504)
回答No.2

フォントサイズを変えるのは、Javascriptではなく、CSSです。 そのソースの中ではなく、そのスクリプトをcallする時に、引数でサイズを与えていると思いますよ。 しかも、cookieですよね？ そのスクリプトは、引数で与えられた数値をフォントサイズとしてCSSに引き渡しているだけじゃないですか？

yorosiku_orz
質問者

お礼

単に、idやclass の指定の書き換え方法が知りたかっただけです。(汗 早々のご回答ありがとう御座いました。

noname#158634
noname#158634
回答No.1

$("p") を変える。 というかその程度まずは自分で検索ぐらいしないと。 https://www.google.com/search?q=jquery+css

yorosiku_orz
質問者

お礼

すみません。　質問する前に、検索して調べてたのですが… 知りたい情報が記載してあるサイトに、たどり着けなかったもので。(汗 早々のご回答ありがとう御座いました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JQUERYのいくつかが順番によって機能しなくなり

    JQUERYのいくつかが順番によって機能しなくなります。 干渉を起こしているのかと思うのですが、どうすれば解決できるのでしょうか？var j = jQuery.noConflict();などをやってみましたが、知識不足でうまくいきませんでした。 ・top messageのみ動く。 var j = jQuery.noConflict(); <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> ・fontsizeとtop messageのみ動く。 <!--script--> <a href="#main" class="gotop"></a> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> <!--script end--> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> jQuery(function(){ jQuery("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--script end-->

  • jQueryのタブにスクロールバーをつけたい

    jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？

  • フォントサイズを変更するボタンについて

    JQUERYでフォントサイズを変更するボタンを導入したのですが、CSSでフォントサイズを指定していると変更ボタンを押しても変更しません。 下記のようなソースなのですが、CSSのimportantのような事はJQUERYでは出来ないのでしょうか？ 優先順位はCSSより低いのでしょうか？ <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul+ul a").textresizer({ target: "#contentsleft,#contentsright,.copyright,address",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> また、最近あまり見なくなったのですが、WEBのプロは閲覧者にサイズは決めてもらったほうが良いのでもう今後は使わない方向に行っているのでしょうか？

  • jquery lightboxを設定しようとしていますが問題がでてます

    jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか　以下のＨＴＭＬソースに足らない部分がありますか？ ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>

  • ｊQueryでのclassの操作

    現在Wordpressに、文字のサイズを「小・中・大」と変えるjQueryを設置しています。 http://az-store.nrym.org/download/extend/jquery-fontsize-switcher/ Wordressではもともとbodyのclassに指定があるのですが、このjQueryを設置すると removeAttr("class")で削除されてしまいます。 そこで、もともとのClassを活かしたまま文字サイズ変更用のクラスだけを 削除&追加ができればいいのですが、 どうすればよいでしょうか？ ただ、単純に「removeAttr("class")」の記述を削除してしまうと、 文字サイズ変更スイッチを押す度に、クラスが追加され続けるのでそれは避けたいです。 $(function(){ var currentstyle = readCookie('fontStyle'); if (currentstyle){ switchFont(currentstyle); }; $("li.sizeL").click(function(){ switchFont("fontL"); return false; }); $("li.sizeM").click(function(){ switchFont("fontM"); return false; }); $("li.sizeS").click(function(){ switchFont("fontS"); return false; }); }); function switchFont(className){ $("body").removeAttr("class").addClass(className); createCookie('fontStyle', className, 365); }; // cookie script http://www.quirksmode.org/js/cookies.html function createCookie(name,value,days){ if (days){ var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else var expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } function readCookie(name){ var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; }

    • ベストアンサー
    • AJAX
  • 教えてください!　lightboxとskitter

    javascriptがまだよく理解できていないので、 愚問に思われるかもしれないですが、上手く動作しなくて困っています。 <head>内に下記のように記述したのですが、lightboxが上手く作動しません。 記述に問題があるんでしょうが、調べても全くわからないので こちらに投稿させていただきました。 どなたかこの問題の解き方をお教えください。 よろしくお願いします。 <link rel="stylesheet" type="text/css" href="css/lightbox.css"> <!--lightbox--> <script src="js/prototype.js" type="text/javascript"></script> <script type="text/javascript" src="js/builder.js"></script> <script type="text/javascript" src="js/effects.js"></script> <script type="text/javascript" src="js/lightbox.js"></script> <script type="text/javascript" src="js/smartRollover.js"></script> <!--smartRollover--> <script type="text/javascript" src="js/jquery.quickflip.source.js"></script> <link rel="stylesheet" type="text/css" href="css/skitter_css/skitter.styles.css"> <!--Skitter--> <style type="text/css"> .box_skitter_large{ width:490px;height:190px; } </style> <script type="text/javascript" src="js/skitter_js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.skitter.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/skitter_js/jquery.animate-colors-min.js"></script> <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({interval: 8000}); <!--数字を大きくするとSkitterの時間がゆっくりになる--> //$('.box_skitter_large').skitter({thumbs: true, label: false,}); }); </script>

  • jQueryでcookie 追加書き込み

    jQueryでcookieに追加書き込みをしたいのですが、どうやってもわかりません。 ここからクッキを追加書き込みを実現したいのですが、 どうやっても頭が回らず困って、混乱気味になっています。 誰か助けてください！ おねがいいたします！ <!DOCTYPE html> <html lang="jp"> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> //入力された値をCookieに保持する function cookie(){ $.cookie("cookie", $("#cookieValue").val()); $("#result").html($.cookie("cookie")); } //現在のCookieの値を出力 $(function() { $("#result").html($.cookie("cookie")); }); </script> <title></title> </head> <body> <input id="cookieValue" type="input"> <a href="index.html" onclick="ｃookie()">クッキー</a> <p><span id="result"></span></p> </body> </html>

  • nyroModal HEADタグ内の記述について

    nyroModal HEADタグ内の記述について http://nyromodal.nyrodev.com/#download 上記ページより、nyroModal1.6.2をダウンロードしました。 設置方法を下記サイト http://www.css-lecture.com/log/javascript/014.html で調べて、サイトの説明どおり設置してみたところ、headタグ内に記述する５行のソースが古いのか（jsファイルが1.2.8になってる）ダウンロードしたファイルと合わず、動作しませんでした。 自分なりに試行錯誤してみて、あてずっぽうですが、下記ソースに書き換えたところ、ギャラリー表示は正常に動作するようになりました。 <link rel="stylesheet" href="styles/nyroModal.css" type="text/css" media="screen" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.min.js"></script> <script type="text/javascript" src="js/jquery.nyroModal-1.6.2.pack.js"></script> しかし下記ページの一番下にあるデモと同じように、Googleへのリンク（外部ページを読み込む） http://www.css-lecture.com/template/2008/1001/ をする場合に、 <p><a href="http://www.google.co.jp/" class="nyroModal">Google</a></p>　と、記述してもウィンドウサイズが400×300くらいに固定されてしまって縦横にスクロールバーが出てしまい、サイト全体が表示できません。 cssやjsのファイルを編集しようと探してみましたが、ウィンドウサイズを指定しているような記述を見つけることができませんでした。 現在のヴァージョンで正常に動作させるためには、headタグ内にどのような記述をしたら良いでしょうか。 また、外部リンクの際にウィンドウサイズを指定できる方法はありますでしょうか。 当方、ネットで独学で調べて設置をしている初心者ですので的外れな質問をしているかもしれませんが、ご教授いただけますでしょうか。 よろしくお願いいたします。

  • 外部jsからdocument.writeするときに文字サイズの指定の仕方

    こんにちは。 HPを作っているのですが、 メニューなどを外部jsに入れテンプレートにし、document.writeで 一度に全体を更新しようと考えています。 しかし、読みだすと　[object]　になってしまいます。 fontタグを取り除くと、大きさ以外は目標のようになります。 （html,javascriptは最後の方に書いてあります） しかし、このままだとバランスが悪いので、どうしても <font size="3">の代わりになる方法がほしいのです。 （ちなみに、外部cssでの指定は一度考えましたが全体の構成上難しいです。） html、javascriptは以下のようになっています HTML <script language="JavaScript" src="js/template.js" charset="UTF-8"></script> <script type="text/javascript"> <!-- document.write(title) //--> </script> ----- javascript title =" <h1>タイトル</h1>" +" <p></p>" +" <h2><font size="3">サブタイトル</font></h2>" ----- よろしくお願いいたします

  • jQueryについて質問です。

    jQueryについて質問です。 複数のプラグインを一つのページに組み込み同時に使いたいのですが、 それぞれが干渉しているのかどれか一つしか使えません。 http://solidstate.jp/Navigation/treeMenu/script_54.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html http://solidstate.jp/Navigation/houseOfCake/script_172.html こちらに紹介されている記事を参考に <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.navigmenu.js"></script> <script type="text/javascript"> $(function(){ $('#menu').navigmenu(); }); </script> <script type="text/javascript" src="accordian.pack.js"></script> <script type="text/javascript"> window.onload = function() { new Accordian('basic-accordian',5,'header_highlight'); } </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#filetree").treeview({//ターゲットとなる要素に付加するID animated: "fast", //アニメーション設定（削除するとアニメ無し） collapsed: true, //開閉設定（削除するとロード時にメニューを全開） unique: true, //動作設定（削除すると自動的に閉じなくなる） persist: "cookie", //Cookie }); }); </script> このような記述を行いました。 ですが、動くのはひとつだけです。 これらを同時に動かすにはどうすればよいでしょうか？ 優先順位は上からです。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する