CODEWITHSUNDEEP
javascripthtml
user2763557
user2763557

Reputation: 439

Setting styles through setAttribute function of an element

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>

Upvotes: 2

Views: 5255

Answers (3)

Mario Rawady
Mario Rawady

Reputation: 871

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>

Upvotes: 3

ochs.tobi
ochs.tobi

Reputation: 3464

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

Upvotes: 1

Suresh Atta
Suresh Atta

Reputation: 122026

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.

Upvotes: 2

Related Questions