<!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="./JQuery.js"></script>
</head>
<body>
<div style="background-color: red;" id="div1">
< img id="png" src="./python.png" alt=""/>
</div>
</body>
</html>
<script>
$("#png").click(function () {
if ($(this).attr("src")=="./云计算.png"){
$("#div1").attr("style","background-color: red")
$(this).attr("src","./python.png")
}else {
$(this).attr("src","./云计算.png")
$("#div1").attr("style","background-color: blue")
}
});
</script>
<!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,red,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,red,yellow);");
}else if(div1.className =="divclass1"){
div1.className ="divclass2";
div1.setAttribute("style","background-image: linear-gradient(to left,red,yellow);");
}else if(div1.className =="divclass2"){
div1.className ="divclass3";
div1.setAttribute("style","background-image: linear-gradient(to bottom,red,yellow);");
}else{
div1.className ="divclass";
div1.setAttribute("style","background-image: linear-gradient(to right,red,yellow);");
}
}
</script>
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
