將色框添加到圖像onClick

Question

我想在發生某些事情時（例如：單擊一個按鈕），讓我的圖像圍繞周圍創建一個框架。 像這樣：

之前的圖像，無邊框

單擊后的圖像，帶有邊框

我可以用CSS做到嗎？

我既不想有兩個鏈接也不要有兩個圖像。 我希望原始圖像發生“轉換”。

編輯：我知道我沒有任何代碼，但這是因為我沒有CSS函數的任何功能或想法。 因此，您無需編寫代碼，只需告訴我使用什么。 希望你能理解

Answer 1

您應該使用javascript onClick事件處理程序和CSS border屬性。

您的html圖像和按鈕標記。

<img src='yourimage.jpg' id='myimg'>
<button onclick="add_frame()">add frame</button>

JavaScript

function add_frame(){

document.getElementById('myimg').style.border = "2px solid red";

}

Answer 2

這是使用jquery的示例。

將一個類添加到您想要能夠向其添加邊框的任何圖像（ .border-on-click ），這應該在CSS內包含一個透明邊框（如果不這樣做，則您的元素將在切換邊框並占用額外空間時的頁面）。

在下面的示例中，您可以通過單擊打開和關閉邊框。

它僅作用於您單擊的圖像。

讓我知道這是否不是您想要的。

 $(".border-on-click").click( function() { $(this).toggleClass("framed"); }); 

 img.border-on-click { border: 4px solid transparent; transition: all 0.5s ease; } img.border-on-click.framed { border: 4px solid red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img class="border-on-click" src="https://via.placeholder.com/150">