jQuery Change

jQuery(ジェイクエリー)で CSS(ウェブページのスタイル)の設定を切り替え(削除・追加)します。
jQuery は、JavaScript を簡単に記述するための JavaScript ライブラリです。

次のリンクをクリックすると jqchange.html が呼び出されます。
change.css では "note" を設定すると TEXT が赤色に変わります。
「CSS の Class を切り替える」をクリックすると "content" ⇔ "note" が切り替わります。
「CSS の note Class を設定する」をクリックすると "note" が設定されます。
「CSS の note Class を削除する」をクリックすると CSS の設定が削除されます。
CSS Change

プログラムの説明

  1. jquery.js をダウンロードして、環境を整えて下さい。
    詳細は jQuery サンプル を参照して下さい。
    jQuery 関係のファイルは utf-8 に統一することにします。
  2. jqchange.html のソースコードです。
    マウスでクリックすると function() 関数が呼び出されます。
    <html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>CSS Change</title>
  <link rel="stylesheet" href="css/change.css" type="text/css">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
    function toggle()
    {   $("p").toggleClass("note");
    }
    function addCSS()
    {   $("p").addClass("note");
    }
    function delCSS()
    {   $("p").removeClass("note");
    }
  </script>
</head>

<body>
  <p class="content" onclick=toggle()>CSS の Class を切り替える</p>
  <p onclick=addCSS()>CSS の note Class を設定する</p>
  <p class="note" onclick=delCSS()>CSS の note Class を削除する</p>
</body>
</html>
  3. ここをクリックすると toggle() 関数が呼び出されて $("p").toggleClass("note"); で交互に切り替わります。
      <p class="content" onclick=toggle()>CSS の Class を切り替える</p>
  4. ここをクリックすると addCSS() 関数が呼び出されて $("p").addClass("note"); が設定されます。
      <p onclick=addCSS()>CSS の note Class を設定する</p>
  5. ここをクリックすると delCSS() 関数が呼び出されて CSS が削除されます。
      <p class="note" onclick=delCSS()>CSS の note Class を削除する</p>
  6. jqchange.html に設定されている change.css を javascript\css に格納します。
    "note" と "content" が定義されています。
    @charset "utf-8";

h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
.note {
color:red;
font-size:16pt;
font-weight:900;
}
.content {
background-color:#8d8;
}

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)