スタイルの追加と削除

実行時に要素の CSS スタイルを追加または削除できます。

次のデモでは、要素の CSS スタイルを追加および削除する方法を示します。

コンポーネントのソース

1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component>
2    <div aura:id="changeIt">Change Me!</div><br />
3    <ui:button press="{!c.applyCSS}" label="Add Style" />
4    <ui:button press="{!c.removeCSS}" label="Remove Style" />
5    
6</aura:component>
7

CSS ソース

1swfobject.registerObject("clippy.codeblock-1", "9");.THIS.changeMe {
2    background-color:yellow;
3    width:200px;
4}
5

クライアント側コントローラのソース

1swfobject.registerObject("clippy.codeblock-2", "9");{
2    applyCSS: function(cmp, event) {
3        var el = cmp.find('changeIt');
4        $A.util.addClass(el.getElement(), 'changeMe');
5    },
6    
7    removeCSS: function(cmp, event) {
8        var el = cmp.find('changeIt');
9        $A.util.removeClass(el.getElement(), 'changeMe');
10    }
11}
12

このデモのボタンは、CSS スタイルを追加または削除するコントローラアクションに結び付けられています。CSS スタイルを要素に追加するには、$A.util.addClass(element, 'class'); を使用します。同様に、クラスを削除するには、コントローラで $A.util.removeClass(element, 'class'); を使用します。cmp.find() でローカル ID (このデモでは aura:id="changeIt") を使用して要素を特定します。

クラスを切り替えるには、要素にクラスが存在しているかどうかに応じてクラスを追加または削除する $A.util.toggleClass(element, 'class'); を使用します。DOM 要素を操作するその他のユーティリティ関数については、JavaScript API リファレンスを参照してください。