dojoオブジェクトの基本（中編）

沖林正紀
2008-01-10 07:00:00
  • このエントリーをはてなブックマークに追加

　前回「dojoオブジェクトの基本（前編）」では、dojoオブジェクトの基本的なメソッドを紹介したが、今回はより複雑な処理を行うメソッドを紹介していく。詳細はAPIドキュメント「Dojo API」で確認していただきたい。

CSSセレクタによる要素の抽出

　dojoでは、Webブラウザに先行してCSS3のセレクタによる要素の抽出をサポートしている。セレクタの詳細はStandard CSS3 Selectorsを参照していただきたいが、CSS2よりも細かい単位で要素の指定ができる。

dojo.query( 'CSSセレクタ' [, 抽出開始する要素] );

例）表の偶数行ごとに背景色を薄いグレーにする
dojo.query( 'tr:nth-child(even)' ).styles( 'backgroundColor', '#eee' );

要素に対するクラスの設定

　HTMLタグにclass属性を記述してCSS設定と関連付ける処理はよく行われる。class属性の値は空白で区切って複数の値を記述できるところが、他の属性とは異なる点だ。dojoではaddClass、removeClass、toggleClassの各メソッドによりclass属性の値の追加、削除、切り替えを行う。また、hasClassでクラスが設定されているかを確認することもできる。

例）id="ex1"の要素にselectedクラスを追加
dojo.addClass( dojo.byId( 'ex1' ), 'selected' );
または
dojo.query( '#ex1' ).addClass( 'selected' );

例）id="ex1"の要素にselectedクラスが設定されているかを確認
dojo.hasClass( dojo.byId( 'ex1' ), 'selected' );
// 設定済みならtrue、そうでなければfalse

例）id="ex1"の要素からselectedクラスを削除
dojo.query( '#ex1' ).removeClass( 'selected' );
または
dojo.removeClass( dojo.byId( 'ex1' ), 'selected' );

例）複数のクラスを追加する
dojo.query( '#ex1' ).addClass( 'guest' ).addClass( 'selected' );
または
dojo.addClass( dojo.byId( 'ex1' ), 'guest selected' );

例）複数のクラスを削除する
dojo.query( '#ex1' ).removeClass( 'selected' ).removeClass( 'guest' );

例）実行されるごとにselectedクラスの追加/削除を切り替える
dojo.toggleClass( dojo.byId( 'ex1' ), 'selected' );
// クラスが設定されていなければ追加
// クラスが設定済みなら削除
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]