1、代码
<!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="../3.8JS案例加强/JQuery.js"></script>
<style>
.picture{
width: 600px;
height: 600px;
background-color: blue;
}
</style>
</head>
<body>
<div class="picture">点击图片变换颜色</div>
</body>
</html>
<script>
$(".picture").click(function(){
if($(this).prop("click")){
$(".picture").css("background-color","yellow")
$(".picture").prop("click",false)
}else{
$(".picture").css("background-color","blue")
$(".picture").prop("click",true)
}
});
</script>
运行结果
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景渐变转换</title>
<style>
div{
height: 700px;
}
</style>
</head>
<body>
<div style=" background-image: linear-gradient(to right,rgb(139, 199, 214),yellow); " class="divclass" onclick="change()">div1</div>
</body>
</html>
<script>
var div1 =document.getElementsByClassName("divclass")[0];
function change(){
if(div1.className =="divclass"){
div1.className ="divclass1";
div1.setAttribute("style","background-image: linear-gradient(to top,rgb(139, 199, 214),yellow);");
}else if(div1.className =="divclass1"){
div1.className ="divclass2";
div1.setAttribute("style","background-image: linear-gradient(to left,rgb(139, 199, 214),yellow);");
}else if(div1.className =="divclass2"){
div1.className ="divclass3";
div1.setAttribute("style","background-image: linear-gradient(to bottom,rgb(139, 199, 214),yellow);");
}else{
div1.className ="divclass";
div1.setAttribute("style","background-image: linear-gradient(to right,rgb(139, 199, 214),yellow);");
}
}
</script>
运行结果