<!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,blue,green); " 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,blue,green);");
}else if(div1.className =="divclass1"){
div1.className ="divclass2";
div1.setAttribute("style","background-image: linear-gradient(to left,blue,green);");
}else if(div1.className =="divclass2"){
div1.className ="divclass3";
div1.setAttribute("style","background-image: linear-gradient(to bottom,blue,green);");
}else{
div1.className ="divclass";
div1.setAttribute("style","background-image: linear-gradient(to right,blue,green);");
}
}
</script>
11-08
11-25
10-12
11-14