Lightning コンポーネント開発者ガイド
jスタイルの追加と削除
実行時に要素の CSS スタイルを追加または削除できます。
次のデモでは、要素の CSS スタイルを追加および削除する方法を示します。
コンポーネントのソース
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 <div aura:id="changeIt">Change Me!</div><br />
19 <ui:button press="{!c.applyCSS}" label="Add Style" />
20 <ui:button press="{!c.removeCSS}" label="Remove Style" />
21</aura:component>
22CSS ソース
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.THIS.changeMe {
18 background-color:yellow;
19 width:200px;
20}
21クライアント側コントローラのソース
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
18 applyCSS: function(cmp, event) {
19 var el = cmp.find('changeIt');
20 $A.util.addClass(el.getElement(), 'changeMe');
21 },
22
23 removeCSS: function(cmp, event) {
24 var el = cmp.find('changeIt');
25 $A.util.removeClass(el.getElement(), 'changeMe');
26 }
27}
28このデモのボタンは、CSS スタイルを追加または削除するコントローラアクションに結び付けられています。CSS スタイルを要素に追加するには、$A.util.addClass(element, 'class') を使用します。同様に、クラスを削除するには、コントローラで $A.util.removeClass(element, 'class') を使用します。cmp.find() でローカル ID (このデモでは aura:id="changeIt") を使用して要素を特定します。
クラスの切り替え
クラスを切り替えるには、クラスを追加または削除する $A.util.toggleClass(element, 'class') を使用します。element パラメータは、HTML 要素またはコンポーネントの場合があります。
マークアップを動的に表示または非表示にする場合は、「マークアップの動的な表示または非表示」を参照してください。
要素の配列のクラスを条件に応じて設定するには、配列を $A.util.toggleClass() に渡します。1mapClasses: function(arr, cssClass) {
2 for(var element in arr) {
3 $A.util.toggleClass(arr[element], cssClass);
4 }
5}
DOM 要素を操作するその他のユーティリティ関数については、JavaScript API リファレンスを参照してください。