オブジェクトの操作その７（HTML CSS）

jQuery オブジェクトの操作

見た目を変える為に頻繁に使用されるCSSについて。
主に３つの方法が。



・指定したCSSプロパティの値を取得する。

・指定したCSSプロパティの値を設定する。

・複数のCSSプロパティの値を設定する。
３個めがかなり便利そう。これJSON形式の記述フォーマットだよねぇ？確か。
いやあんま詳しく知らんけど。
じゃ、サンプルを。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function() {
        alert("#div1のフォントカラーを赤にする。");
        $("#div1").css("color", "red");

        alert("#div2の背景色を薄い青にする");
        $("#div2").css("background-color", "lightblue");

        alert("さらにその値を取得してみる。");
        alert($("#div2").css("background-color"));

        alert("複数のCSSを一気に設定する");
        //★複数のCSSをいっぺんに登録したい場合に気をつけること。
        //ハイフンを使用したパラメータ（background-color等）は次の様な変更が必要。
        // １．ハイフン直後のアルファベットを大文字にする。
        // ２．ハイフンを削除する。
        $("#div3").css({
          color : "green",
          backgroundColor : "gray",
          borderStyle : "solid",
          borderWidth : "1px"
        });
      })
    </script>
  </head>
  <body>
    <div id="div1">#div1 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div2">#div2 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div3">#div3 ぱんぱかぱんつでぱんぱかぱん</div>
    <div id="div4">#div4 ぱんぱかぱんつでぱんぱかぱん</div>
  </body>
</html>