javascript - Jquery 单击颜色

标签 javascript jquery colors onclick

我正在尝试使用 jquery 更改 div 的颜色,我的页面已经定义了 jQuery 和一个名为 getBallColor 的 JavaScript 函数。但我不知道如何完成这个任务,有人可以帮忙吗。

Codepen 网址:http://codepen.io/anon/pen/XJVRrL

HTML:
<div id="myBall">
</div>



CSS:
#myBall{
width:150px;
height:150px;
border-radius:100px;
line-height:100px;
background:purple;
margin: auto;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}


Javascript:
$(window).load(function(){
$("#myBall").click(function (){

});
});

最佳答案

使用'background-color'而不是'background'

#myBall{
  width:150px;
  height:150px;
  border-radius:100px;
  line-height:100px;
  background-color: purple;
  margin: auto;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

然后你只需更改特定的 CSS 属性即可:

$(window).load(function(){
    $("#myBall").click(function (){
        $(this).css("background-color", "lime");
    });
});

查看您的CodePan改进:

关于javascript - Jquery 单击颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28440693/

相关文章:

c# - 更改 zedgraph 选定的曲线颜色

javascript - 更改使用时放置的 svg 矩形描边

javascript - 解析 JSON 字符串失败

javascript - 我正在尝试使页眉折叠

javascript - 维护范围

javascript - 无法在 Fancybox 底部添加 20px 的内边距

eclipse - 使用深色 Eclipse 颜色主题和比较编辑器

javascript - AngularJS: View 完全加载后的 DOM 操作

javascript - 读取数值中的选定字节

javascript - 使用 jquery ui 滑出 'mobile' 类型菜单