むかし、stylesheetToggle.jsというスクリプトがあった。いまも使われているが、ページの文字の大きさを変えたり、背景色を変えたりできるJavascriptだ。これが今は、JQueryを使って簡単にできるようになった。文字の大きさや色だけでなく、すべてのCSS設定を動的に変更することができるから便利だ。

〔例1〕クリックすると文字色と背景色が変わり、テキストも変わる。

ここをクリック

クラス名.change が指定された部分のスタイルをクリックして変更、追加できる。

<style>.change { color:green; cursor:pointer; }</style>
<script src="/assets/js/jquery.js"></script>
<script>
  $(function(){
    $(".change").click(function(){
      $(this).text("文字の色が変わり、背景色も変わる"); 
      $(this).css("color","white");
      $(this).css("background-color","#000");
    }); 
  })
</script>

〔例2〕指定したセクションの文字の大きさを変える

大きくする  小さくする

この部分の文字サイズが変わる

  $("#large").click(function(){
    $(".stylechange").css("font-size","30px");
  });  
  $("#small").click(function(){
    $(".stylechange").css("font-size","10px");
  }); 

〔例3〕トグル(クリックしてオン・オフを切り替える)


ここが id="myDiv" を指定したセクション

#myDIVのクラスを .blue に変更する。再度クリックすると元のクラス .box に戻る。

Javascript
  $("button").click(function() {
    $("#myDiv").toggleClass("blue");
  });
HTML
<button>myDIVスタイルを変える</button>
<div id="myDiv" class="box">ここが id="myDiv" を指定したセクション</div>

〔例4〕記事本文の文字サイズを変える

〔例5〕表示/非表示トグル

ここをクリックすると#toggleが表示/非表示

ここが表示/非表示になる

ここにJQuery機能の一覧がある。

BACK | BLOG | CLOSE