通过元素的setAttribute函数设置样式

Question

我正确使用setAttribute吗？当我点击“蓝色”按钮后单击重置时，框没有颜色，但似乎仍然将高度设置为150px。我在这做错了什么？

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>

Answer 1

您的错误是您使用backgroundColor而不是background-color

按钮Reset1是编写函数的正确方法，但它覆盖了所有样式（如width，padding，margin ......）

所以我写了另一个功能点击按钮Reset 2必须做你想要的。但你必须尝试它，而不是点击Reset 1，因为它将删除所有其他样式

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>

Answer 2

请记住，setAttribute会覆盖所有其他样式，并始终尝试使用样式对象中的属性，就像在其他单击事件中一样。

你快到了

如果您仍然尝试使用setAttribute学习，问题是本机css中没有backgroundColor。你只有background-color。改变它，它的工作原理。

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>

不要与javascript属性和本机css属性混淆。 Javascript用style的element对象中的camelcase字母表示css属性。

Answer 3

您可以像以前一样使用document.getElementById("box").style。

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