CODEWITHSUNDEEP
javascriptcss
variable
variable

Reputation: 9634

How to dynamically change CSS style attribute of DIV tag?

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.

Upvotes: 4

Views: 34909

Answers (4)

jPratas
jPratas

Reputation: 215

You can try something like this, for example:

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

Upvotes: 0

Suman Bogati
Suman Bogati

Reputation: 6349

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

Upvotes: 2

David
David

Reputation: 4361

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

Upvotes: 8

halkujabra
halkujabra

Reputation: 2942

You can add style this way using js -

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

Upvotes: 1

Related Questions