0

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

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

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

这正是我想要做的。

知道我该怎么做吗？

4

2 回答 2

3

假设您的图像使用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，我们可以将idonclick 函数中的 传递为：

  <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";
   }
于 2012-10-11T05:20:56.223 回答
1

用您的风格创建一个班级。例如 

.selected{
   border : 1px solid green;
}

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

于 2012-10-11T05:35:15.247 回答