2008-09-16 + 18:58
Category:jQuery
tags:,
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl（バザール）に追加このエントリをChoixに追加このエントリをnewsingに追加

jQuery:CSSへのアクセス

引き続き、jQueryの学習を進めるのであった。

道のりは遠いような近いような感じですが、本日も進みます。
今日はCSSへのアクセスと操作です。

■CSSメソッド
CSSへアクセスするには、専用のメソッドを使用する。
それがCSSメソッド。

パラメーターの数で動作が違うので要注意!!

  • パラメーターが1つの場合
    css(“プロパティ”)で対象プロパティの値を読み込む

    $(“p”).css(“color”)

    pタグのcolorの値を取得

  • パラメーターが2つの場合
    css(“プロパティ”,”値”)でスタイルシートの値を設定する

    $(“p”).css(“color”,”#000000″)


■プロパティを一括で書き換える

cssメソッドに2つのパラメーターを与える場合、以下のようなcodeが考えられる。

$(“p”).css(“color”,”#000000″).css(“background-color”,”#0033cc”)

この様に複数のプロパティを同時に操作する場合、以下の記述で対応できる。

$(“p”).css({“color”:”#000000″,”background-color”:”#0033cc”})

ちょっとCSSのような、じゃ無いような不思議なcodeですね(汗
codeの冗長化は避けたいので必須ですね。

■クラスの追加/削除

クラスの追加はaddClass()メソッド、削除はremoveClass()メソッドを使用する。

ex.class=”sample”をpタグに追加する

$(“p”).addClass(“nore”)

ex.class=”sample”をpタグから削除する

$(“p”).removeClass(“note”)

■スタイルシートの交互切替

スタイルシートの切替を交互に行うtoggleClass()メソッドを使用する。
ex.通常⇒heightクラス⇒通常

.height {height:20px;}

$(“p”).toggleClass(“height”)

ふむふむ。

  1. CSSへのアクセスはCSSメソッド
  2. ＣSSクラスの追加=addClass()メソッド
  3. CSSクラスの削除=removeClass()メソッド
  4. CSSクラスの交互切替=toggleClass()メソッド

よっしゃ。ちぃ覚えた!!（違

どうでもいいのですが、
$(“p”) ←ヨダレ垂らしているみたいですねwww



Related posts

[Ads]

Lancers.jp

Comments&Trackback

Trackback URI:http://blog.e2esound.com/20080916/entry-id=479/trackback

Leave a Reply