点击后修改图片边框颜色
时间: 2023-07-30 19:04:24 浏览: 57
要实现点击后修改图片边框颜色,可以使用JavaScript来监听点击事件并修改CSS样式。以下是一个简单的示例:
HTML代码:
```html
<img src="example.jpg" onclick="changeBorderColor(this)" />
```
JavaScript代码:
```javascript
function changeBorderColor(img) {
img.style.border = "5px solid red";
}
```
在上面的示例中,当用户单击图片时,会调用`changeBorderColor`函数来修改图片的边框颜色为红色。
当然,你也可以在CSS中定义一个类来指定图片的边框样式,然后使用JavaScript来切换该类。以下是一个示例:
HTML代码:
```html
<img src="example.jpg" onclick="toggleBorder(this)" />
```
CSS代码:
```css
img {
border: 5px solid blue;
}
img.highlight {
border-color: red;
}
```
JavaScript代码:
```javascript
function toggleBorder(img) {
img.classList.toggle("highlight");
}
```
在上面的示例中,当用户单击图片时,会调用`toggleBorder`函数来切换图片的样式类。如果图片已经具有`highlight`类,则会将其移除;如果图片没有`highlight`类,则会将其添加。当图片具有`highlight`类时,其边框颜色会变为红色。