用JS更改框的颜色
用JS更改框的颜色
提问于 2018-07-08 01:45:13
新来的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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-08 02:23:32
正如Heretic所暗示的，正如Guzz所提到的，您缺少了方法.css()，正如Rafv所提到的，您的选择器是错误的，它应该是$('#box')。我将在代码的精神中更进一步，并动画化颜色的变化：
$("#box").animate().css({
backgroundColor: "blue"
}, 2500);更重要的是，将其添加到CSS中：
#box {
transition: background-color 2.5s ease-out
}作为奖励，重置功能被重写，使方法链式和排列，使每个动画可以看到反向。
...
$("#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>
Stack Overflow用户
发布于 2018-07-08 01:52:28
您的jquery函数应该是：
$("box").css({backgroundColor:"blue"});http://api.jquery.com/css/
Stack Overflow用户
发布于 2018-07-08 02:04:26
您在#部分丢失了box部分，对于非多个css，更好地使用
$("#box").css("background-color", "blue");css("propertyname“、"value")；
关于这个这里的更多信息。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51228220
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号