To find component, use component.find(‘Cmp’),where Cmp is the aura:id attribute value.<\/p>\n\n\n\n
Let\u2019s take an example to add and remove style from the component or element during runtime<\/p>\n\n\n\n
Create Lightning Component<\/span><\/em><\/strong><\/h4>\n\n\n\nSampleComponent<\/strong><\/p>\n\n\n\n<aura:component> \r\n <div aura:id=\"Cmp\">SalesForce Lightning<\/div><br\/>\r\n <lightning:button onclick=\"{!c.addCSS}\" label=\"Add Style\" \/>\r\n <lightning:button onclick=\"{!c.removeCSS}\" label=\"Remove Style\" \/>\r\n<\/aura:component>\r<\/code><\/pre>\n\n\n\nSampleCss<\/strong><\/p>\n\n\n\n.THIS.changeStyle {\r\n background-color:white;\r\n color:black;\r\n}<\/code><\/pre>\n\n\n\nSampleController<\/strong><\/p>\n\n\n\n- To add CSS style use $A.util.addClass(object element, string class) method and to remove CSS style use $A.util.removeClass(object element, string class) method.<\/li>
- Whenever the user clicks on \u201cAdd style<\/strong>\u201d button the \u201caddclass\u201d<\/strong> controller method gets invoked and it will appends the CSS style to the component or element.<\/li>
- Similary,when the user clicks on \u201cRemove style<\/strong>\u201d button the \u201cremoveclass<\/strong>\u201d controller method gets invoked and it will remove the CSS style from the component or element. Refer to the below code.<\/li><\/ul>\n\n\n\n
({\r\n addCSS: function(cmp, event) {\r\n var cmpDiv = cmp.find(\u2018Cmp\u2019);\r\n $A.util.addClass(cmpDiv, 'changeStyle');\r\n },\r\n removeCSS: function(cmp, event) {\r\n var cmpDiv = cmp.find(\u2018Cmp\u2019);\r\n $A.util.removeClass(cmpDiv, 'changeStyle');\r\n } \r\n})<\/code><\/pre>\n\n\n\n- Here is the output, so now when the user clicks on the \u201cAdd style\u201d<\/strong> button the background and the text color of \u201cSalesforce Lightning<\/strong>\u201d text will change.<\/li><\/ul>\n\n\n\n
![\"Add](\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/06\/1_Add-Style.png\")
<\/a><\/center>\nAdd Style during runtime<\/i><\/center><\/font>\n\n\n\n- Similarly, when user clicks on \u201cRemove style\u201d<\/strong> button the background and the text color of \u201cSalesforce Lightning<\/strong>\u201d text will be removed as shown in the below images.<\/li><\/ul>\n\n\n\n
![\"Remove](\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/06\/2_Remove-style.png\")
<\/a><\/center>\nRemove style during runtime<\/i><\/center><\/font>\n\n\n\nThis way you can add and\/or remove CSS style from the component or element. We hope you may find this blog resourceful and helpful.<\/p>\n\n\n\n
We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at salesforce@greytrix.com<\/a>.<\/p>\n\n\n\nAbout Us<\/b><\/br>\n
Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.
Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration<\/a> for Sage X3<\/a>, Sage 100<\/a> and Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM Salesforce customization and development services<\/a> along with services such as Salesforce Data Migration<\/a>, Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU™ integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on Salesforce AppExchange<\/a>.
The GUMU™ Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.
For more information on our Salesforce products and services, contact us at salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\nRelated Posts<\/strong><\/p>\n\n\n\n- How to add Utility bar in a Salesforce lightning application<\/a><\/li>
- How to Notify User about Unsaved Changes on the UI using Lightning Component<\/a> <\/li>
- Add Delete Row Dynamically In Salesforce Lightning<\/a><\/li>
- Salesforce \u2013 How to get row index of lightning table rows<\/a><\/li>
- How to Activate and Add Salesforce Lightning component on Community experience<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
In this blog, we will discuss how to Add and Remove CSS style from the component or element during runtime. To add and remove CSS style from the component or element, you need to use $A.util.addClass(object element ,string class) and $A.util.removeClass(object element, string class) methods, where \u201celement\u201d is the component to add and remove the\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1155,1153,1158,1131,63,1157,1156,1055,1133,208,1154,367],"class_list":["post-6206","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-add-class","tag-add-remove-style","tag-add-remove-style-dynamically","tag-aura","tag-css","tag-css-lightning","tag-css-style","tag-lightning-aura-component","tag-lightning-basic","tag-lightning-component","tag-remove-class","tag-salesforce"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=6206"}],"version-history":[{"count":3,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6206\/revisions"}],"predecessor-version":[{"id":6226,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6206\/revisions\/6226"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=6206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=6206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=6206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<aura:component> \r\n <div aura:id=\"Cmp\">SalesForce Lightning<\/div><br\/>\r\n <lightning:button onclick=\"{!c.addCSS}\" label=\"Add Style\" \/>\r\n <lightning:button onclick=\"{!c.removeCSS}\" label=\"Remove Style\" \/>\r\n<\/aura:component>\r<\/code><\/pre>\n\n\n\nSampleCss<\/strong><\/p>\n\n\n\n.THIS.changeStyle {\r\n background-color:white;\r\n color:black;\r\n}<\/code><\/pre>\n\n\n\nSampleController<\/strong><\/p>\n\n\n\n- To add CSS style use $A.util.addClass(object element, string class) method and to remove CSS style use $A.util.removeClass(object element, string class) method.<\/li>
- Whenever the user clicks on \u201cAdd style<\/strong>\u201d button the \u201caddclass\u201d<\/strong> controller method gets invoked and it will appends the CSS style to the component or element.<\/li>
- Similary,when the user clicks on \u201cRemove style<\/strong>\u201d button the \u201cremoveclass<\/strong>\u201d controller method gets invoked and it will remove the CSS style from the component or element. Refer to the below code.<\/li><\/ul>\n\n\n\n
({\r\n addCSS: function(cmp, event) {\r\n var cmpDiv = cmp.find(\u2018Cmp\u2019);\r\n $A.util.addClass(cmpDiv, 'changeStyle');\r\n },\r\n removeCSS: function(cmp, event) {\r\n var cmpDiv = cmp.find(\u2018Cmp\u2019);\r\n $A.util.removeClass(cmpDiv, 'changeStyle');\r\n } \r\n})<\/code><\/pre>\n\n\n\n- Here is the output, so now when the user clicks on the \u201cAdd style\u201d<\/strong> button the background and the text color of \u201cSalesforce Lightning<\/strong>\u201d text will change.<\/li><\/ul>\n\n\n\n
<\/a><\/center>\nAdd Style during runtime<\/i><\/center><\/font>\n\n\n\n- Similarly, when user clicks on \u201cRemove style\u201d<\/strong> button the background and the text color of \u201cSalesforce Lightning<\/strong>\u201d text will be removed as shown in the below images.<\/li><\/ul>\n\n\n\n
<\/a><\/center>\nRemove style during runtime<\/i><\/center><\/font>\n\n\n\nThis way you can add and\/or remove CSS style from the component or element. We hope you may find this blog resourceful and helpful.<\/p>\n\n\n\n
We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at salesforce@greytrix.com<\/a>.<\/p>\n\n\n\nAbout Us<\/b><\/br>\n
Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.
Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration<\/a> for Sage X3<\/a>, Sage 100<\/a> and Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM Salesforce customization and development services<\/a> along with services such as Salesforce Data Migration<\/a>, Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU™ integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on Salesforce AppExchange<\/a>.
The GUMU™ Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.
For more information on our Salesforce products and services, contact us at salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\nRelated Posts<\/strong><\/p>\n\n\n\n- How to add Utility bar in a Salesforce lightning application<\/a><\/li>
- How to Notify User about Unsaved Changes on the UI using Lightning Component<\/a> <\/li>
- Add Delete Row Dynamically In Salesforce Lightning<\/a><\/li>
- Salesforce \u2013 How to get row index of lightning table rows<\/a><\/li>
- How to Activate and Add Salesforce Lightning component on Community experience<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"
In this blog, we will discuss how to Add and Remove CSS style from the component or element during runtime. To add and remove CSS style from the component or element, you need to use $A.util.addClass(object element ,string class) and $A.util.removeClass(object element, string class) methods, where \u201celement\u201d is the component to add and remove the\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1155,1153,1158,1131,63,1157,1156,1055,1133,208,1154,367],"class_list":["post-6206","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-add-class","tag-add-remove-style","tag-add-remove-style-dynamically","tag-aura","tag-css","tag-css-lightning","tag-css-style","tag-lightning-aura-component","tag-lightning-basic","tag-lightning-component","tag-remove-class","tag-salesforce"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=6206"}],"version-history":[{"count":3,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6206\/revisions"}],"predecessor-version":[{"id":6226,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6206\/revisions\/6226"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=6206"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=6206"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=6206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}