图片链接点击后，图片周围出现虚线怎么办？可以去掉吗？答案是肯定的，想要去掉虚线我们首先会选择css来实现这个效果，今天，济南网站建设小编为大家带来一个小案例，通过css+JavaScript动态控制完整小案例，有需要的朋友可以过来参考一下。
关键代码：
<head>
<title>去除图片链接点击虚线</title>
<style>
body {
margin: 50px;
}
a {
/* 基础方案：全局清除链接聚焦虚线 */
outline: none;
}
img {
border: none; /* 清除低版本浏览器图片默认边框 */
}
.box {
margin: 20px 0;
}
button {
padding: 6px 12px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<a href="#" id="imgLink">
<img src="https://picsum.photos/200/120" alt="示例图片">
</a>
</div>
<button id="removeLine">移除点击虚线</button>
<button id="showLine">恢复点击虚线</button>
<script>
const link = document.getElementById('imgLink');
const removeBtn = document.getElementById('removeLine');
const showBtn = document.getElementById('showLine');
// JS 动态移除虚线（取消聚焦轮廓）
removeBtn.onclick = function() {
link.style.outline = 'none';
}
// JS 动态恢复虚线
showBtn.onclick = function() {
link.style.outline = '';
}
// 补充：兼容 IE 旧版，点击时清除边框
link.onclick = function(e) {
// 阻止默认焦点样式
this.blur();
// 兼容处理
e.preventDefault();
}
</script>
</body>
评论