Jquery单击颜色

Jquery On Click Color

本文关键字：颜色 单击 Jquery      更新时间：2023-09-26

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

代码笔URL: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的改进：

例如在css 中创建一个名为red的类

.red { background-color: red; }

然后使用点击事件处理程序来切换类

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

EDIT我刚刚看到了你提到的关于函数的部分，这里有一个更好的答案：

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

这假设函数getBallColor（）以字符串形式返回一个有效的颜色。

相关文章：