实验要求
点击背景,渐变方向发生改变
运行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM操作属性</title>
<style>
.divClass1{
width: 600px;
height: 600px;
background-image: linear-gradient(red,blue,yellow);
}
.divClassC{
width: 600px;
height: 600px;
background-image: linear-gradient(to right,red,blue,yellow);
}
</style>
</head>
<body>
<div id="divId1" class="divClass1" onclick="changeColor()">div</div>
</body>
</html>
<script>
var div1 = document.getElementById("divId1");
function changeColor(){
if(div1.className == "divClass1"){
div1.className = "divClassC"
} else {
div1.className = "divClass1"
}
}
</script>
运行结果
点击前
点击后