使用 Javascript 反转过滤器 'blur'

Question

简而言之，我有一个按钮，可以模糊我网站上的图像。它触发这个函数：

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>

Answer 1

你打错了。它的 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">

Answer 2

如果我没理解错的话，你想添加一个辅助按钮，使图像在模糊后恢复正常。您可以通过将第二个函数更改为 imga.style.filter = 'none';

EX:

<!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>

使用 Javascript 反转过滤器 'blur'

Reverse the filter 'blur' with Javascript

javascript

blur

css-transitions