<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 150px;
height: 150px;
background-color: red;
color: white;
font-size: 20px;
}
</style>
</head>
<body>
<div>div1</div>
<script src="jquery-1.10.1.min.js"></script>
<script>
// 制作一个红色背景白色文字(div1)的div,当点击该元素时,背景色变成黄色,文字变成div2颜色为红色,再次点击时则变回来
var bOn = true;
$("div").click(function (){
// $(this).html($(this).html()=="div1" ? "div2" : "div1").css({
// "backgroundColor" : $(this).html()=="div2" ? "yellow" : "red",
// "color" : $(this).html()=="div2" ? "red" : "white",
// })
// 方法二
$(this).html(bOn ? "div2" : "div1").css({
"backgroundColor" : bOn ? "yellow" : "red",
"color" : bOn ? "red" : "white",
})
bOn = !bOn;
})
</script>
</body>
</html>
练习——事件函数(切换div的背景颜色)
最新推荐文章于 2021-06-26 11:12:40 发布