How To Dynamically Change Css Style Attribute Of Div Tag?

We have a div tag:

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

Solution 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

Solution 2:

You can add style this way using js -

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

Solution 3:

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;");

Solution 4:

You can try something like this, for example:

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