点击更改图像边框颜色答案

【问题标题】：change image border color onclick点击更改图像边框颜色
【发布时间】：2012-10-01 17:02:59
【问题描述】：

我有一个页面，用户需要为 T 恤选择颜色。

当用户选择一种颜色时，我希望图像的边框颜色变为绿色。

如果用户点击了不同的颜色，则需要放回默认的边框颜色，并改变被点击的新图片的边框颜色。

Here 正是我想要做的。

知道我该怎么做吗？

【问题讨论】：

它似乎已经开始工作了。有什么问题？
它确实在您链接的网站上运行。
我链接的网站只是我想做的一个例子..
我最终在这里找到了我需要的东西：stackoverflow.com/questions/3374393/…

标签： javascript jquery css image border

【解决方案1】：

假设你的图片使用img标签显示如下：

  <img name="img01" id="img01" src="image.gif" border="2" bordercolor="#000000">

如下实现onClick函数fnChangeBorder

   function fnChangeBorder(){
      document.getElementById("img01").style.borderColor="#00FF00";
   }

或

   function fnChangeBorder(){
      var imgElement = document.getElementById("img01");
      imgElement.setAttribute("style:borderColor", "#00FF00");
   }

或者您可以定义一个样式类并执行以下操作：

   function fnChangeBorder(){
      document.getElementById("img01").style.className="greenClass";
   }

编辑：

对于多张图片，带有索引的id，我们可以在onclick函数中将索引传递为：

  <img name="img1" id="img1" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder(1);">

  <img name="img2" id="img2" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder(2);">

并将fnChangeBorder 更新为：

   function fnChangeBorder(index){
      document.getElementById("img"+index).style.className="greenClass";
   }

对于多张图片，没有索引id，我们可以在onclick函数中传递id为：

  <img name="imgabc" id="imgabc" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder('imgabc`);">

  <img name="imgxyz" id="imgxyz" src="image.gif" border="2" bordercolor="#000000"
        onclick="javascript:fnChangeBorder('imgxyz');">

并将fnChangeBorder 更新为：

   function fnChangeBorder(imageId){
      document.getElementById(imageId).style.className="greenClass";
   }

【讨论】：

感谢您的回复。但是由于我有十几个图像，我需要为每个图像提供十几个这样的功能吗？就像我说的，如果用户单击另一张图片，则需要将所有图片设置为默认边框颜色，并仅为该图片设置绿色边框颜色..
并非如此。我之前没有想到你有十几个图像。我希望您尝试一次更新一个。还有更多的方法。我正在用前两种管理方式更新答案。如果这没有帮助，请告诉我。

【解决方案2】：

使用您的样式创建一个类。例如

.selected{
   border : 1px solid green;
}

然后在单击项目时应用类名。避免使用 setAttribute 设置项目的类名。它有一些问题。然后单击图像删除所有项目上选定的类名，然后将选定的类名应用于目标图像。

【讨论】：