Minimal example under Lightning Locker:
StyleTest.app:
<aura:application >
<p id="special">Look at me! I am so very special!</p>
<ui:button label="Element.style.color = 'red'" press="{!c.handle1}" />
<ui:button label="Element.style.setProperty('color', 'green')" press="{!c.handle2}" />
</aura:application>
StyleTestController.js:
({
handle1 : function(c,e,h) {
document.getElementById('special').style.color = 'red';
},
handle2 : function(c,e,h) {
document.getElementById('special').style.setProperty('color', 'green');
}
})
On API 37 with Lightning Locker enabled, both buttons try to set the same style property but only the second one succeeds. The first one silently fails. Now I realize it is not in general great practice to set inline styles using JavaScript when we can use classes instead, a lot of great plugins use these properties to dynamically style elements. For example the "qTip2" jQuery plugin runs into this issue: It is able to add classes and HTML attributes to the elements I select, but it is not successful at adding inline styles.
Given that setting .style.property fails but .style.setProperty() succeeds, can I gather that this is not intended behaviour?
