JavaScript onClick方法來更改圖像的CSS屬性

我在HTML頁面上有一個圖像，該圖像在CSS文件中設置爲模糊。我想要做的是創建JavaScript代碼，所以點擊圖片時，圖片不再模糊。理想情況下，我想要一個onClick事件處理程序來更改CSS文件並使圖像無法顯示。JavaScript onClick方法來更改圖像的CSS屬性

或者，我一直通過創建第二個圖像來實現這一點，該圖像已經過濾爲模糊圖像，並且當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.

感謝提前:)

來源

2016-06-28 Chloe

經典downvote。我相當肯定SO上有一個高級程序員的團伙，他們只是嘲笑noobs的問題，並給他們低估。 OP有一個問題，你能幫忙而不是埋葬他嗎？ – Alexandre

嘗試這樣

jQuery的

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

來源

2016-06-28 15:06:19

即時對不起，請你精心打理@ObinnaNwakwue –

東西，你可以在圖像上添加一個onClick方法，像這樣：

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

這意味着，當您的圖像被點擊時，功能myFunction（）被調用，你在那裏做你所需要的。

來源

2016-06-28 15:08:35

你有2個img文件嗎？一個模糊和其他不模糊？如果是這樣，你可以改變你在onClick方法中調用的函數中的img源代碼。 –

如果找到我，寧願訪問DOM，而不是使用HTML元素屬性？ – Chloe

是的，我有兩個圖像，一個模糊，一個不模糊。我之前做的是更改圖像源（請參閱上面的代碼），但我有很多帶有大量圖像的HTML頁面，因此創建和編輯它們都很乏味，所以寧願使用CSS來改變圖像，然後使用JavaScript來移除過濾器點擊時。 – Chloe

JavaScript onClick方法來更改圖像的CSS屬性

回答

相關問題