1.使用Jquery完成点击图片变换图片颜色
实现代码：
<!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="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
img {
cursor: pointer;
width: 1000px;
height: 500px;
}
</style>
</head>
<body>
<img id="mImage" src="./微信图片_20240113151613.jpg" alt="Image">
<script>
$(document).ready(function() {
$("#mImage").click(function() {
var currentFilter = $(this).css("filter");
if (currentFilter.includes("hue-rotate")) {
$(this).css("filter", "none");
} else {
$(this).css("filter", "hue-rotate(180deg)");
}
});
});
</script>
</body>
</html>2. 使用 JS 中的 DOM 操作完成背景颜色渐变方向变换
实现代码：
<!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>
.box {
width: 300px;
height: 300px;
border: 1px solid rgb(106, 255, 0);
background-color: aquamarine;
background-image: linear-gradient(to right, rgb(0, 255, 102), rgb(0,255,217));
}
.boxC {
background-image: linear-gradient(to left, rgb(0,255,102), rgb(0, 255, 217));
}
</style>
</head>
<body>
<div class="box"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var boxA = document.querySelector(".box");
boxA.addEventListener("click", function() {
boxA.classList.toggle("boxC");
});
});
</script>
</body>
</html>
结果：
