How to add/remove CSS inline-style with the DOM


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:

  • the qualified method: method of an element, value, priority);

// example'color', 'purple', 'important')
  • or the shortcut that will set the attribute to a low priority = "purple";


<button style="color: blue">Click to change my color</button>
document.querySelector('button').addEventListener("click", function(event) { 
    button  =;
    color =;
       // qualified  method'color',"purple","important");
    } else {
        // property set method = "blue";
  • Click on the button to see it in action


  • The property value or an empty string if not set
value ='cssProperty');
  • The priority value or an empty string if not set
priority ='cssProperty');

Discover More
CSS - Property

CSS defines a finite set of parameters, called properties, that defines the rendering of a document. Properties are written in a css rule after the element selection definition. Properties are attached...
Class Html Beauty Blue Added
DOM - Class attribute

manipulation in the DOM. API The DOM Web API has a special function to select on class: the getElementsByClassName() function one You can select the class with a selector With Native Javascript...

Share this page:
Follow us:
Task Runner