CSS, JS 关于 (1) 通过 CSS 改进 JS 代码和 (2) 删除超链接图像周围的蓝色虚线边框的问题答案

【问题标题】：CSS, JS questions on (1) improving JS code through CSS and (2) removing blue dotted borders around hyperlinked imagesCSS, JS 关于 (1) 通过 CSS 改进 JS 代码和 (2) 删除超链接图像周围的蓝色虚线边框的问题
【发布时间】：2011-01-15 20:20:53
【问题描述】：

div.img
{   
    margin:7px;
    border:3px solid gray;
    height:110px;
    width:110px;
    float:left;
    text-align:center;
}   


div.img img 
{   
    display:inline;
    margin:3px;
    border:1px solid white;
}   


div.img a:hover img 
{   
    border:3px solid yellow;
}   


function handleMouseClick(imageName)
{
    document.getElementById(imageName).style.borderWidth = '3';
    document.getElementById(imageName).style.borderStyle = 'solid';
    document.getElementById(imageName).style.borderColor = 'yellow';
}

我在上面粘贴了一些 JS 和 CSS 代码，它们呈现带边框的边框图像，并将鼠标单击时的图像边框更改为“3px 纯黄色”。此代码按预期工作，但我想知道是否有更好的方法通过 CSS 而不是我在 handleMouseClick(...) 中的 JS 代码来做到这一点。

其次，当我选择我的图像时，图像边框会按预期更改为“3px 纯黄色”，但由于 img 元素是“<a href...> </a>”的子元素，我还会在图像周围看到一个虚线蓝色边框。如何摆脱蓝色边框？

【问题讨论】：

标签： html css image javascript

【解决方案1】：

CSS 值为outline。使用

a:active {outline: none;}

删除轮廓。

【讨论】：

【解决方案2】：

嗯，人们还在使用 DOM？

改用jquery：

//CSS:
.selected {
 border:3px solid yellow;
}

//Java Script
$("#myImgId").click(function(){
  $(this).addClass("selected");
});

【讨论】：

感谢神话。我确实考虑过使用 jquery，但我暂时跳过了它。我肯定会在不久的将来考虑它。
有了 jQuery，你还在使用血腥的 DOM :)。

【解决方案3】：

这里有几个问题：

你的<A>标签真的是锚吗？它会导致什么吗？如果不是，那么您可能不想/不需要将您的 <IMG> 包裹在锚点中。
如上一个答案中所暗示的，您可能希望使用 CSS 类。

这里是合并这些建议的示例：

<style type="text/css">
  img.myimage {
    border: 3px solid blue; /* assuming you want the blue border by default */
    cursor: pointer; /* Hint the user that the image may be clicked */
  }
  img.myimage-clicked {
    border: 3px solid yellow;
  }
</style>
<script type="text/javascript">
  function handleMouseClick() {
    document.getElementById("whatever").className = "myimage-clicked";
  }
</script>
...
<img id="whatever" src="" class="myimage" onclick="handleMouseClick()">

【讨论】：

嗨，Sorin，我的形象不是真正的主播。它不会导致任何事情。但是通过将其作为锚点，当我通过 CSS 将鼠标悬停在图像上时，我可以设置边框。我知道我可以在鼠标悬停事件上通过 JS 做同样的事情。您知道没有锚标签的更好方法吗？感谢您的回复。 -k
您好，我更倾向于挂钩 onmouseover 和 onmouseout 并更改类，而不是使用非语义标签。你是对的，你可以依赖 :hover 选择器作为锚点（而不是图像，如果你想保持这个跨浏览器兼容）。但另一方面，如果您使用诸如 jQuery 或 Google Closure 库之类的框架，添加事件侦听器也很便宜。 Hth 索林

【解决方案4】：

您可以更改您的 div.img a:hover img 以申请其他案例

div.img a:hover img, div.img img.selected
{   
    border:3px solid yellow;
}

然后只需在点击时使用 javascript 添加selected..

function handleMouseClick(imageName)
{
    document.getElementById(imageName).className  = 'selected';
}

【讨论】：

谢谢盖比。这很有帮助:-)

【解决方案5】：

js 操作 html 样式最简洁的方法是设置 class 属性。在您的情况下，在 CSS 中定义了一个具有虚线边框的类，并在检测到鼠标单击时使用 js 设置它。我完全没有得到第二个问题

【讨论】：