DOM Reading and changing inline styles


Inline style

You can manipulate the inline CSS style of an HTML element by simply reading or editing its style property.

Assume the following element:

<div id="element_id" style="color:blue;width:200px;">abc</div>

With this JavaScript applied:

var element = document.getElementById('element_id');

// read the color
console.log(; // blue

//Set the color to red = 'red';

//To remove a property, set it to null = null; = null;

However, if width: 200px; were set in an external CSS stylesheet, = null would have no effect. In this case, to reset the style, you would have to set it to initial: = 'initial'.