Question

我在HTML页面上有一个图像，它在CSS文件中设置为模糊。我想要做的是创建JavaScript代码，以便在单击图像时，图像不再模糊。理想情况下，我想要一个onClick事件处理程序来更改CSS文件并使图像变为unblurry。

或者，我已经通过创建已经过滤为模糊的第二个图像来实现这一点，并且当onClick发生时，图像源被更改为unblurry图像。然而，这很乏味，并且想要一种更简单的方法。

此外，我希望JavaScript能够在包含不同页面图像的多个HTML页面上工作，而不是将其包含在该特定图像的每个页面上。

以前方法的示例代码：

 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script src="javascript.js"></script>
 </head>
 <body>

 <div id="image">
    <img id="img" src="imgblur.jpg" height=300 width=300>
 </div>   
 </body>
 </html>

JavaScript的：

window.onload = init;
function init() {
var image = document.getElementById("img");
image.onclick = showAnswer;
}

function showAnswer() {
var image = document.getElementById("img");
image.src = "img.jpg";
}

通缉法的代码：

 <html>
 <head>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script src="javascript.js"></script>
 </head>
 <body>

 <div id="image">
    <img id="img" src="img.jpg" height=300 width=300>
 </div>   
 </body>
 </html>

CSS：

img {
filter: blur(5px);
}

JavaScript的：

When image is clicked, the CSS is changed and blur filter is removed.

提前致谢：）

Answer 1

尝试这样的事情

<强> Jquery的

$('#img').click(function(){
   $(this).css({'filter':'blur(0px)'})
});

Answer 2

您可以在图片上添加onClick方法，如下所示：

...
<img id="img" src="img.jpg" height=300 width=300 onClick="myFunction()">
...

这意味着，当您单击图像时，会调用 myFunction（）函数，并在那里执行您需要的操作。

JavaScript onClick方法改变图像的CSS属性

2 个答案: