オブジェクトの操作その６（HTML 属性）

jQuery オブジェクトの操作

今までのは全部「要素」に対する操作だったけど、今度は属性の操作について。
基本となる記述方法は次の通り。

//取り出し
var value = $(セレクター).attr(属性名);
//変更
$(セレクター).attr(属性名, 属性値);
//削除
$(セレクター).removeAttr(属性名);

こんな感じ。但し、クラス属性はカンマ区切りで複数のクラスを指定できるので、専用の操作関数が容易されている。

//追加
$(セレクター).addClass(クラス名);
//削除
$(セレクター).removeClass(クラス名);

じゃ、実際にサンプルを。

<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("#a1要素のhref属性値を取得するぜ。");
        alert("#a1要素のhref属性値\n\n　　" + $("#a1").attr("href"));

        alert("#a2要素のhref属性値を設定するぜ。");
        $("#a2").attr("href", "http://www.google.co.jp/")
        alert("#a2要素のhref属性値\n\n　" + $("#a2").attr("href"));

        alert("#a1要素のhref属性値を削除するぜ。");
        $("#a1").removeAttr("href");
        alert("#a1要素のhref属性値\n\n　　" + $("#a1").attr("href"));

        alert("#div1要素にフォントを緑色にするclass属性値を追加するぜ。");
        $("#div1").addClass("divGreen");

        alert("#div3要素にフォントをイタリック体にするclass属性値を追加するぜ。");
        $("#div3").addClass("divItalic");

        alert("#div3要素にフォントをボールド体にするclass属性値を追加するぜ。");
        $("#div3").addClass("divBold");

        alert("#div3要素からフォントをイタリック体にするclass属性値を削除するぜ。");
        $("#div3").removeClass("divItalic");
      })
    </script>
    <style>
      div {
        border: solid 1px gray;
      }
      .divGreen {
        color: green;
      }
      .divBold {
        font-weight: 700;
      }
      .divItalic {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <div id="div1">#div1 <a id="a1" href="http://yahoo.co.jp/">ぱんぱかぱんつでぱんぱかぱん</a></div>
    <div id="div2">#div2 <a id="a2">ぱんぱかぱんつでぱんぱかぱん</a></div>
    <div id="div3" class="div3">#div3 .div1 <a id="a3">ぱんぱかぱんつでぱんぱかぱん</a></div>
    <div id="div4">#div4 <a id="a4">ぱんぱかぱんつでぱんぱかぱん</a></div>
  </body>
</html>

これも多分結構使うだろうなぁ。