This page talks about on how to manipulate the HTML style attribute on the DOM.
This page is part of CSS javascript serie: CSS - Javascript Manipulation
To set an inline style, you use:
element.style.setProperty(property, value, priority);
// example
element.style.setProperty('color', 'purple', 'important')
button.style.color = "purple";
Demo:
<button style="color: blue">Click to change my color</button>
document.querySelector('button').addEventListener("click", function(event) {
button = event.target;
color = button.style.color;
if(color=="blue"){
// qualified method
button.style.setProperty('color',"purple","important");
} else {
// property set method
button.style.color = "blue";
}
});
value = el.style.getPropertyValue('cssProperty');
priority = el.style.getPropertyPriority('cssProperty');