为图像添加颜色框 onClick答案

【问题标题】：Add colour frame to image onClick为图像添加颜色框 onClick
【发布时间】：2019-05-10 01:06:51
【问题描述】：

我希望，当发生某些事情时（例如：单击按钮），我的图像会在周围创建一个框架。像这样的：

Image before, without the frame

Image after click, with the frame

我可以用 CSS 做到这一点吗？

我不想有两个链接或两个图像。我希望原始图像发生“转换”。

编辑：我知道我没有任何代码，但那是因为我没有 CSS 函数的任何功能或想法。所以你不需要写代码，只需要告诉我用什么。希望你能理解

【问题讨论】：

stackoverflow.com/questions/14319274/…我会尝试第二个答案
但是我只想改变图片的边框，可以吗？根据第二个答案，我会更改所有图像的背景颜色吗？非常感谢@Katie.Sun 的回答！
您将不得不更改选择器以及更改的 css 属性
谢谢！我已经明白该怎么做了。我在html和css中有border属性。

标签： javascript html css

【解决方案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";

}

【讨论】：

【解决方案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">

【讨论】：

我不是在寻找 jquery 解决方案，但这对我也有帮助。因为我想使用“可拖动”功能，而不是“点击时”。谢谢。这对我有用。