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.

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.

• javascript
• css

• Maybe: stackoverflow.com/questions/7125453/… – sshashank124 Commented Mar 22, 2014 at 11:31
• I would like to have something like document.getelementbyid (chagne the property) – variable Commented Mar 22, 2014 at 11:32
• Use the .style property all HTML nodes have. – David Commented Mar 22, 2014 at 11:32
• you can use addclass or removeclass of jquery – Dexter Commented Mar 22, 2014 at 11:34
• This is about style attribute, other one was about class attribute.. – variable Commented Mar 22, 2014 at 11:34

4 Answers 4

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

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

You can add style this way using js -

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

You can try something like this, for example:

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