使用JS更改单击框的颜色

Question

js新手，可能需要一些帮助。单击蓝色按钮后，我一直在尝试更改框的颜色。我可以只使用js更改框的颜色，还是需要一些CSS魔术？

$("#btn1").on("click", function() {
  $("#box").animate({
    height: "+=35px",
    width: "+=35px"
  }, "fast");
})

$("#btn2").on("click", function() {
  $("box")({
    backgroundColor: "blue"
  });
})

$("#btn3").on("click", function() {
  $("#box").fadeOut();
})

$("#btn4").on("click", function() {
  $("#box").animate({
    height: "150px",
    width: "150px"
  }, "fast");
  $("#box").fadeIn(), "fast";

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>

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

<button id="btn1">Grow</button>
<button id="btn2">Blue</button>
<button id="btn3">Fade</button>
<button id="btn4">Reset</button>

Answer 1

您的jquery函数应为：

$("box").css({backgroundColor:"blue"});

http://api.jquery.com/css/

Answer 2

您在#部分中丢失了box，对于非多个CSS，请更好地使用

$("#box").css("background-color", "blue");

  

css（“ propertyname”，“ value”）;

有关此here的更多信息。

Answer 3

正如Heretic Monkey提示缺少代码一样，正如Guzz提到的那样，您缺少方法.css()，而正如Rafv的那样，您的选择器是错误的，应该是$('#box')。我将本着代码的精神进一步前进，并对颜色变化进行动画处理：

$("#box").animate().css({
  backgroundColor: "blue"
}, 2500);

，更重要的是，将其添加到CSS：

#box {
  transition: background-color 2.5s ease-out
}

作为奖励，重置功能被重写，以便 methods are chained 并进行排列，以便可以反向观看每个动画。

...
  $("#box").fadeIn("fast").animate({
    height: "150px",
    width: "150px"
  }, "fast").css({
    backgroundColor: "pink"
  }, 1500);
...

---

演示

$("#btn1").on("click", function() {
  $("#box").animate({
    height: "+=35px",
    width: "+=35px"
  }, "fast");
});

$("#btn2").on("click", function() {
  $("#box").animate().css({
    backgroundColor: "blue"
  }, 2500);
});

$("#btn3").on("click", function() {
  $("#box").fadeOut();
});

$("#btn4").on("click", function() {
  $("#box").fadeIn("fast").animate({
    height: "150px",
    width: "150px"
  }, "fast").css({
    backgroundColor: "pink"
  }, 1500);
});

#box {
  transition: background-color 2.5s ease-out
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p></p>

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

<button id="btn1">Grow</button>
<button id="btn2">Blue</button>
<button id="btn3">Fade</button>
<button id="btn4">Reset</button>