How to dynamically change CSS style attribute of DIV tag?

Question

We have a div tag: <div id='div1' style="background-color:red"></div>

I would like to know how can we change the style attribute of this div tag:-

1. Can we clear the style value?

2. Can we append value to the existing style attribute ?

3. Can we set new value to style attribute

Thanks in advance.

Answer 1

var div = document.getElementById('div1');

// Clear Value
div.setAttribute('style','');
  // OR
div.removeAttribute('style');

// Set Style / Append Style
div.style.backgroundColor = '#ff0000';

Don't modify the style attribute directly when adding or changing styles unless you want to remove them all.

JavaScript removeAttribute: https://developer.mozilla.org/en-US/docs/Web/API/Element.removeAttribute Javascript Style: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style

Answer 2

Use setAttribute() to override and add new value over the property.

var div = document.getElementById('div1');
// div.setAttribute('property', 'value');

div.setAttribute("style", "color: green; align:center;");

Answer 3

You can add style this way using js -

document.getElementById('#div1').style += "padding-top:40px";

Answer 4

You can try something like this, for example:

$("#div1").css("property",'value');