スタイルの追加と削除

コンポーネントのクラス名を取得するには、component.find('myCmp').get('v.class') (myCmp は aura:id 属性値) を使用します。

コンポーネントまたは要素の CSS クラスを追加または削除するには、$A.util.addClass(cmpTarget, 'class') および $A.util.removeClass(cmpTarget, 'class') メソッドを使用します。

コンポーネントのソース

1<aura:component>
2    <div aura:id="changeIt">Change Me!</div><br />
3    <lightning:button onclick="{!c.applyCSS}" label="Add Style" />
4    <lightning:button onclick="{!c.removeCSS}" label="Remove Style" />
5</aura:component>

CSS ソース

1.THIS.changeMe {
2    background-color:yellow;
3    width:200px;
4}

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

1{
2    applyCSS: function(cmp, event) {
3        var cmpTarget = cmp.find('changeIt');
4        $A.util.addClass(cmpTarget, 'changeMe');
5    },
6    
7    removeCSS: function(cmp, event) {
8        var cmpTarget = cmp.find('changeIt');
9        $A.util.removeClass(cmpTarget, 'changeMe');
10    }
11}

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

1mapClasses: function(arr, cssClass) {
2    for(var cmp in arr) {
3        $A.util.toggleClass(arr[cmp], cssClass);
4    }
5}