dojoオブジェクトの基本(中編)
沖林正紀
2008/01/10 07:00
今回はdojoオブジェクトのより複雑な処理を行うメソッドを紹介していこう。
前回「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' );
// クラスが設定されていなければ追加
// クラスが設定済みなら削除
- 1人の推薦記事
- 0人がクリップ
-
ソーシャルブックマーク(-)
- トラックバック(0)
- 特集: dojoの広大な門をたたく (8件)
- 昨日のトップ記事
- 2日前
- 3日前
- 6日前
- 7日前
- ホワイトペーパー
- 企画特集
REAL IT COOL PROJECT
国内シェアNo1
今なら無料! IBMの「グリーンIT化診断」
ただのERPだけじゃもう足りない!
グリーンデータセンターの新潮流
Green Enterprise
局所冷却に注目。
仲間と情報を共有・公開する楽しみ方は?
グローバル競争に金融不安……
Touch Diamond VS iPhone 3G
NECのグリーンITの本気度「PUEは1.58」
情報大洪水時代を生き抜くソリューション
価格から質へと変わるアウトソーシング市場
IT技術者はもっと幸せになれる!
Techno Exchange
- なぜ、ERP 導入は敷居が高いのか?
- エンタープライズサーチ特集!
- 運用管理こそ業務の背骨
- ERP,CRMのレスポンスの遅さを劇的改善!
- 市場のニーズに応えた帳票ソリューション
- MicrosoftもOracleもDWH市場に参入!
- 所有から利用へ。拡大するiDC市場
- データバックアップで事業継続力を向上!
- Web2.0時代におけるセキュリティ上の課題
- 解約率わずか1%のホスティングサービス
- 話題のタグ
プログラミング言語
プロジェクト管理
Linux
モバイル
SOA
server
Flash
Apple
Opera
Firefox
開発環境
Microsoft
iPhone
Webデザイン
脆弱性
ブラウザ
Off Topic
Windows
デザイン
iPod touch
Mac OS X
Tips
Ajax
小技
Internet Explorer
携帯電話機
JavaScript
オープンソース
仮想化ソフトウェア
iPhone 3G
Java
Safari
Database
Firefox 3
仮想化
ソフトウェア開発
Adobe
データベース
入門
Google
Mozilla
レビュー
PHP
リファレンス
CSS
ユーザーインタフェース
RIA
Webサービス
HTML
UI
話題のタグを見る »
CSS 3のボックスレイアウトでコンテンツを画面の中央に配置する
ローカルへのデータの保存を可能にするDOM Storage
iPhoneアプリ開発苦労話ベスト3―伝説の開発者に訊く(その1)
あなたの知らないPKI(2)--PKIのコア要素/電子証明書と認証局
不況に強いITを目指す--不況時に高い需要が望める分野はこれだ
最初からXenを組み込んだPCが出荷される:Xenプロジェクト創始者の将来予測