jquery点击颜色

我想改变我的div使用jQuery的颜色，我的页面已经有jQuery和一个名为getBallColor的JavaScript函数定义它。但我不确定如何完成这项任务，有人可以提供帮助。jquery点击颜色

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(){ 

}); 
});

来源

2015-02-10 Martin Hall

创建一个名为红色例如在你的CSS

.red { background-color: red; }

然后使用click事件处理程序切换类

$(document).ready(function(){ 
    $("#myBall").click(function(){ 
     $(this).toggleClass('red'); 
    }); 
});

编辑类我刚看到关于fu的部分你提到的，这里是更好的答案：

$(document).ready(function(){ 
    $("#myBall").click(function(){ 
     $(this).css('background-color', getBallColor()); 
    }); 
});

这假定函数getBallColor（）返回一个有效的颜色作为一个字符串。

来源

2015-02-10 20:03:20

非常感谢您！：d – 2015-02-10 20:48:13

使用'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改进：

来源

2015-02-10 20:12:37

jquery点击颜色

回答

相关问题