
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' );
// クラスが設定されていなければ追加
// クラスが設定済みなら削除
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
意識してますか?PCの「信頼性」
-
ITシステムは永久のβ版思考で
-
「データ」こそDXの主役
-
攻めと守りのクラウド活用とは!?
-
下した決断は「ハイブリッドへ」
-
AI活用が激変する新たなインフラ
-
ウルトラ帳票文化を乗り越える!
-
働き方、生産性を根底から底上げ!
-
2020年代を勝ち抜くインフラ
-
データ活用を加速するエコシステム
-
どこまで可能?企業を究極の自動化
-
明治創業の鉄道企業がAWSに挑戦
-
ビジネスの大きな転換点で勝者に!
-
ビジネス成功の砦はここにあり!
-
特集:ポスト2020時代のCX再考
-
働き方改革は身近な「改善」から
-
働き方改革にモニターが有効なワケ
-
サブスクモデルのSaaSで業務改善
-
講演レポ:ポスト2020時代の基盤
-
RPAがニガテなExcelをどう使う
-
変化への対応はリアルタイム経営で
-
分析されたデータを活用できるか?
-
特集:ビジネスを止めるな!
-
隗より始めよ
-
クラウドバックアップお悩み相談室
-
レガシーなインフラ設計を見直す
-
Why ワークプレース?