<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>第四次作业</title>
<style>
.gray-scale {
filter: grayscale(100%);
}
#gradientBox {
width: 100%;
height: 100vh;
}
.gradient-top-to-bottom {
background: linear-gradient(to bottom, red, yellow);
}
.gradient-left-to-right {
background: linear-gradient(to right, red, yellow);
}
</style>
</head>
<body>
<img id="myImage" src="C:\Users\eren\Pictures\Camera Roll\84a903990f71c_396557.jpg" alt="" width="100">
<div id="gradientBox" class="gradient-top-to-bottom"></div>
<script>
document.getElementById('myImage').addEventListener('click', function() {
this.classList.toggle('gray-scale');
});
document.getElementById('gradientBox').addEventListener('click', function() {
var box = this;
if (box.classList.contains('gradient-top-to-bottom')) {
box.classList.remove('gradient-top-to-bottom');
box.classList.add('gradient-left-to-right');
} else {
box.classList.remove('gradient-left-to-right');
box.classList.add('gradient-top-to-bottom');
}
});
</script>
</body>
</html>
扫一扫
1206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
