简而言之，我有一个按钮，可以模糊我网站上的一个图片。它触发了这个功能。
function testblur() {imga.style.filter = 'blur(80px)';}
很好用 现在我想有第二个按钮来扭转模糊效果。我试图通过将滤镜设置为零来实现这个功能。
function unblur1() {imga.stlye.filter = 'blur(0px)';}
但根本没用 重新加载图像并不是一个真正的选项，因为我希望发生过渡效果。有什么方法可以反转滤镜吗？或者有其他方法可以让模糊动画向后播放？
<Body>
<button onClick="testblur()">blurOn</button>
<button onClick="unblur1()">blurOff</button>
<img id="img1" class="blifterimg" src="blifter/1.jpg" alt="1">
<script>
var imga = document.getElementById('img1');
function testblur() {imga.style.filter = 'blur(80px)';}
function unblur1() {imga.stlye.filter = 'blur(0px)';}
</script>
</Body>
你有一个错别字。它是 imga.style 其实不 imga.stlye
工作演示。
const imga = document.getElementById('imga')
function testblur() {
imga.style.filter = 'blur(80px)';
}
function unblur1() {
imga.style.filter = 'blur(0px)';
}<button onclick="testblur()">Blur</button><button onclick="unblur1()">Un-Blur</button><br><br>
<img id="imga" src="https://www.w3schools.com/cssref/pineapple.jpg" alt="Pineapple" width="200" height="200">如果我的理解是正确的，你想添加一个辅助按钮，使图像在模糊后恢复正常。你可以通过修改第二个函数 imga.style.filter = 'none'来实现。
EX.style.filter = 'none';。
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button><br><br>
<button onclick="myFunctionTwo()">Reverse it</button><br><br>
<img id="myImg" src="img.jpg">
<script>
function myFunction() {
document.getElementById("myImg").style.filter = "blur(80px)";
}
function myFunctionTwo() {
document.getElementById("myImg").style.filter = "none";
}
</script>
</body>
</html>