如题,效果预览如下
所需代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击图片变换颜色</title>
<style>
.original-color {
filter: none;
}
.changed-color {
filter: grayscale(100%) invert(1);
}
</style>
</head>
<body>
<img id="img" class="original-color" src="../01.html/1.1文本标签/image.png" width="300">
<!-- 加载 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$('#img').click(function(){
$(this).toggleClass('original-color changed-color');
});
});
</script>
</body>
</html>