运行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击图片变换图片颜色</title>
<script src="../04.jq/JQuery.js"></script>
<style>
.pic{
width: 600px;
height: 600px;
background-color: blue;
}
</style>
</head>
<body>
<div class="pic">点击图片变换图片颜色</div>
</body>
</html>
<script>
$(".pic").click(function(){
if($(this).prop("click")){
$(".pic").css("background-color","red")
$(".pic").prop("click",false)
}else{
$(".pic").css("background-color","blue")
$(".pic").prop("click",true)
}
});
</script>
运行结果
点击前
点击后