jQuery CSS

jQuery(ジェイクエリー)で CSS(ウェブページのスタイル)を利用します。
jQuery は、JavaScript を簡単に記述するための JavaScript ライブラリです。
CSS の説明は CSS Before や CSS After を参照して下さい。

次のリンクをクリックすると jqcss.html が呼び出されます。
「書き替え」ボタンをクリックすると色が変わります。
jQuery CSS サンプル

プログラムの説明

  1. jquery.js をダウンロードして、環境を整えて下さい。
    詳細は jQuery Guid を参照して下さい。
  2. css ファイルを格納するサブフォルダー(css)を javascript のフォルダーに作成します。
    javascript\css に main.css を格納します。
    main.css のソースコードです。
    h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
  3. jquery.js を利用する jqcss.html を作成します。
    href="css/main.css" で css を参照します。
    src="js/jquery.js" で jquery.js が組み込まれています。
    changeCSS() 関数で、タグ <p>jQueryとは？</p> の TEXT の色を変更します。
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>jQuery CSS</title>
  <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
  <!--
  function changeCSS()
  {   $("p").css("color", "#ff0000");
  }
  // -->
  </script>
</head>
<body>
  <h1>jQuery CSS サンプル</h1>
  <p>jQueryとは？</p>
  <form>
    <input type="button" value="書き替え" onClick="changeCSS()">
  </form>
</body>
</html>
  4. JQuery を使わない方法 文字サイズと文字の色 と比べてみて下さい。
    $("p").css("color", "#ff0000");

document.getElementById("content").style.color=color;
    $() は HTMLエレメント(タグ)へのアクセス用として使われています。
    JQuery になれると本来の書き方を忘れてしまいそうになるので要注意です。 (^_^;)

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