Setting styles through setAttribute function of an element

Question

Am I using setAttribute correctly? When I click reset after say clicking "blue" button, box has no color but it seems like it is still setting the height to 150px. What am i doing wrong here?

document.getElementById("button1").addEventListener("click", function() {
  document.getElementById("box").style.height = "250px";
});



document.getElementById("button2").addEventListener("click", function() {
  document.getElementById("box").style.backgroundColor = "blue";
});


document.getElementById("button4").addEventListener("click", function() {
  document.getElementById("box").setAttribute("style", "backgroundColor: orange; height:150px");
});

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>

Mario Rawady · Accepted Answer · 2018-03-05 15:13:35Z

3

Your error is that you are using backgroundColor instead of background-color

Button Reset1 is the correct way to write your function, but it is overriding all the styles (like the width, padding, margin...)

So I wrote another function on click of the button Reset 2 that must do what you are looking for. But you must try it, without clicking on Reset 1 since it will remove all the other styles

document.getElementById("button1").addEventListener("click", function(){
    document.getElementById("box").style.height="250px";
});

document.getElementById("button2").addEventListener("click", function(){
    document.getElementById("box").style.backgroundColor="blue";
});

document.getElementById("button4").addEventListener("click", function(){
    document.getElementById("box").setAttribute("style","background-color:orange; height:150px");
});

document.getElementById("button5").addEventListener("click", function(){
    document.getElementById("box").style.height="150px";
    document.getElementById("box").style.backgroundColor="orange";
});

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset 1</button>
<button id="button5">Reset 2</button>

answered Mar 5, 2018 at 15:13

Mario Rawady

8717 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2763557 Over a year ago

so i just added the styles in two separate lines for button 4, but is there a way to just have them all together and have it produce what i want it to? document.getElementById("button5").addEventListener("click", function(){ document.getElementById("box").style.height="150px"; document.getElementById("box").style.backgroundColor="orange"; });

Mario Rawady Over a year ago

you must use the function of button5 if you want to change only the height and the background color, because setAttribute('style', ...) will remove all the style attributes set to this element and replace them with the new ones. So your best solution is to replace each style alone like we are doing in button5

Suresh Atta · Accepted Answer · 2018-03-05 15:13:16Z

2

Remember that setAttribute overrides all your other styles and always try to use their properties from the style object like you did in other click events.

You are almost there

If you still trying to learn with setAttribute, the problem is that there is no backgroundColor in native css. You have only background-color. Change it and it works.

document.getElementById("button1").addEventListener("click", function(){
    document.getElementById("box").style.height="250px";
});



document.getElementById("button2").addEventListener("click", function(){
    document.getElementById("box").style.backgroundColor="blue";
});


document.getElementById("button4").addEventListener("click", function(){
  document.getElementById("box").setAttribute("style","background-color:orange; height:250px");
  });

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>

Do not confuse with javascript properties and with native css properties. Javascript represents css properties with camelcase letters with in style object of element.

answered Mar 5, 2018 at 15:13

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

1 Comment

user2763557 Over a year ago

this makes sense, because even when i use background-color, although it changes the color, and height, the width does not take on what i initially set it to in html. Learned something new today! thank you!

ochs.tobi · Accepted Answer · 2018-03-05 15:13:33Z

1

You can use the document.getElementById("box").style like you did before.

document.getElementById("button4").addEventListener("click", function(){
    document.getElementById("box").style.backgroundColor="orange";
    document.getElementById("box").style.height="150px"
});

answered Mar 5, 2018 at 15:13

ochs.tobi

3,4727 gold badges34 silver badges53 bronze badges

1 Comment

user2763557 Over a year ago

is there any way to combine these styles? or is this the only way?

Collectives™ on Stack Overflow

Setting styles through setAttribute function of an element

3 Answers 3

2 Comments

You are almost there

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

You are almost there

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related