Changing element style attribute dynamically using JavaScript

Question

I hav a certain style sheet for a div. Now i want to modify one attribute of div dynamically using js.

How can i do it?

document.getElementById("xyz").style.padding-top = "10px";

Is this correct?

KooiInc · Answer 1 · 2023-05-24T07:15:41.453

264

In addition to other answers, if you want to use the dash notition for style properties, you can also use:

document.getElementById("xyz").style["padding-top"] = "10px";

[edit 2023] Very old answer. For who it may concern: I created a small library to change styling dynamically @Github.

edited May 24 '23 at 07:15

answered Mar 04 '11 at 11:10

KooiInc

119,216
31
141
177

3

Me neither, this is really useful for dynamic functions, one can pass the style as a string value, then set the style and value. Great solution. – raphie Aug 11 '13 at 17:51
2

Also, adding to what @raphie says, you can also use `document.getElementById("xyz").style["paddingTop"] = '10px'`. – Toothbrush Aug 11 '14 at 20:06

score 142 · Accepted Answer · edited Nov 13 '15 at 16:26

It's almost correct.

Since the - is a javascript operator, you can't really have that in property names. If you were setting, border or something single-worded like that instead, your code would work just fine.

However, the thing you need to remember for padding-top, and for any hyphenated attribute name, is that in javascript, you remove the hyphen, and make the next letter uppercase, so in your case that'd be paddingTop.

There are some other exceptions. JavaScript has some reserved words, so you can't set float like that, for instance. Instead, in some browsers you need to use cssFloat and in others styleFloat. It is for discrepancies like this that it is recommended that you use a framework such as jQuery, that handles browser incompatibilities for you...

score 37 · Answer 3 · answered Oct 15 '17 at 11:25

There is also style.setProperty function:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

document.getElementById("xyz").style.setProperty('padding-top', '10px');

// version with !important priority
document.getElementById("xyz").style.setProperty('padding-top', '10px', 'important');

score 19 · Answer 4 · edited Aug 14 '14 at 20:27

19

I resolve similar problem with:

document.getElementById("xyz").style.padding = "10px 0 0 0";

Hope that helps.

edited Aug 14 '14 at 20:27

Marius Bancila

16,053
9
49
91

answered Nov 27 '12 at 09:12

chairul

191
1
2

2

The con of doing this way is that you get the padding for other sides set to `0`. And sometimes you don't want that. – Gustavo Straube Jan 21 '17 at 15:06

score 18 · Answer 5 · edited Apr 12 '23 at 10:12

18

Assuming you have HTML like this:

<div id='thediv'></div>

If you want to modify the style attribute of this div, you'd use

document.getElementById('thediv').style[ATTRIBUTE] = '[VALUE]'

Replace [ATTRIBUTE] with the style attribute you want. Remember to remove '-' and make the following letter uppercase.

Examples

document.getElementById('thediv').style.display = 'none'; //changes the display
document.getElementById('thediv').style.paddingLeft = 'none'; //removes padding

edited Apr 12 '23 at 10:12

CPHPython

12,379
5
59
71

answered Mar 04 '11 at 08:52

JohnP

49,507
13
108
140

1

As stated in the accepted answer, there are some exceptions. Like `float`. – Gustavo Straube Jan 21 '17 at 15:07

score 9 · Answer 6 · edited Nov 16 '15 at 12:25

I would recommend using a function, which accepts the element id and an object containing the CSS properties, to handle this. This way you write multiple styles at once and use standard CSS property syntax.

//function to handle multiple styles
function setStyle(elId, propertyObject) {
    var el = document.getElementById(elId);
    for (var property in propertyObject) {
        el.style[property] = propertyObject[property];
    }
}

setStyle('xyz', {'padding-top': '10px'});

Better still you could store the styles in a variable, which will make for much easier property management e.g.

var xyzStyles = {'padding-top':'10px'}
setStyle('xyz', xyzStyles);

Hope that helps

Rama Adaikkalam · Answer 7 · 2018-04-30T13:39:30.747

9

Surprised that I did not see the below query selector way solution,

document.querySelector('#xyz').style.paddingTop = "10px"

CSSStyleDeclaration solutions, an example of the accepted answer

document.getElementById('xyz').style.paddingTop = "10px";

edited Apr 30 '18 at 13:39

answered Apr 30 '18 at 05:14

Rama Adaikkalam

665
1
7
14

score 8 · Answer 8 · answered Nov 04 '13 at 19:42

8

document.getElementById("xyz").style.padding-top = '10px';

will be

document.getElementById("xyz").style["paddingTop"] = '10px';

answered Nov 04 '13 at 19:42

T.Todua

53,146
19
236
237

score 8 · Answer 9 · edited Nov 16 '15 at 12:24

8

document.getElementById("xyz").setAttribute('style','padding-top:10px');

would also do the job.

edited Nov 16 '15 at 12:24

Artiom

7,694
3
38
45

answered Jun 15 '15 at 18:18

Pinkesh Badjatiya

346
1
5
15

7

The downside of doing this way is that you get any other inline style removed. That's because you're replacing the entire attribute value. I guess getting the current style, checking for an existing value for the property you want to set, and then add/replace by the desired value is a better solution. – Gustavo Straube Jan 21 '17 at 15:11
Agreed. But the OP needed a solution closer to what he was already doing which was not taking into account your use case. This is one of the simplest ways to achieve that, but it is surely not the best. – Pinkesh Badjatiya Jan 21 '17 at 23:34
@GustavoStraube, I wouldn't call it a downside. In many cases this is exactly what the developer wants to do - i.e. overwrite the element's style. I would call it a consequence of doing it this way. – stwr667 Jan 02 '20 at 08:16

score 6 · Answer 10 · answered Apr 04 '18 at 18:10

6

document.getElementById('id').style = 'left: 55%; z-index: 999; overflow: hidden; width: 0px; height: 0px; opacity: 0; display: none;';

works for me

answered Apr 04 '18 at 18:10

Hyperion

155
2
8

score 0 · Answer 11 · answered Jan 13 '21 at 13:04

I change css style in Javascript function.

But Uncaught TypeError: bild is null .

If I run it in a normal html file it work.

CODE:

  var text = document.getElementById("text");
var bild = document.getElementById("bild");
var container = document.getElementById("container");

bild.style["background-image"] = "url('stock-bild-portrait-of-confident-senior-business-woman-standing-in-office-with-her-arms-crossed-mature-female-1156978234.jpg')";
//bild.style.background-image = "url('stock-bild-portrait-of-confident-senior-business-woman-standing-in-office-with-her-arms-crossed-mature-female-1156978234.jpg')";

 //  bild.style["background-image"] =  "url('" +  defaultpic + "')";
 alert (bild.style["background-image"]) ;
 bild.style["background-size"] = "300px";
 bild.style["background-repeat"] = "no-repeat";
 bild.style["background-position"] = "center";
 bild.style["border-radius"] = "50%";
 bild.style["background-clip"] = "border-box";
 bild.style["transition"] = "background-size 0.2s";
 bild.style["transition-timing-function"] = "cubic-bezier(.07,1.41,.82,1.41)";
 bild.style["display"] = "block";
 bild.style["width"] = "100px";
 bild.style["height"] = "100px";

 bild.style["text-decoration"] = "none";
 bild.style["cursor"] = "pointer";
 bild.style["overflow"] = "hidden";
 bild.style["text-indent"] = "100%";
 bild.style["white-space"] = "nowrap";

 container.style["position"] = "relative";
 container.style["font-family"] = "Arial";

 text.style["position"] = "center";
 text.style["bottom"] = "5px";
 text.style["left"] = "1px";
 text.style["color"] = "white";

Changing element style attribute dynamically using JavaScript

11 Answers11

Linked

Related