javascript 更改图像边框颜色 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12832661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
change image border color onclick
提问by Jon87
I have a page where the users needs to pick a color for a tshirt.
我有一个页面，用户需要在其中选择 T 恤的颜色。
When the user selects a color, I want the image's border color to change to green.
当用户选择一种颜色时，我希望图像的边框颜色变为绿色。
And if the user click a different color, it needs to put back the default border color and change the border color of the new image that was clicked.
如果用户点击不同的颜色，它需要放回默认的边框颜色并更改点击的新图像的边框颜色。
Hereis exactly what I am trying to do.
这正是我想要做的。
Any idea how I could do that ?
知道我怎么做吗？
回答by Yogendra Singh
Say your image is displayed using imgtag as below:
假设您的图像使用img标签显示如下：
<img name="img01" id="img01" src="image.gif" border="2" bordercolor="#000000">
implement onClick fnction fnChangeBorderas below
实现 onClick 函数fnChangeBorder如下
function fnChangeBorder(){
document.getElementById("img01").style.borderColor="#00FF00";
}
or
或者
function fnChangeBorder(){
var imgElement = document.getElementById("img01");
imgElement.setAttribute("style:borderColor", "#00FF00");
}
or you can define a style class and do like:
或者您可以定义一个样式类并执行以下操作：
function fnChangeBorder(){
document.getElementById("img01").style.className="greenClass";
}
EDIT:
编辑：
For multiple images, with indexed id, we can pass the index in the onclick function as:
对于带有索引 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);">
And update fnChangeBorderas:
并更新fnChangeBorder为：
function fnChangeBorder(index){
document.getElementById("img"+index).style.className="greenClass";
}
For multiple images, with non-indexed id, we can pass the idin the onclick function as:
对于具有非索引 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');">
And update fnChangeBorderas:
并更新fnChangeBorder为：
function fnChangeBorder(imageId){
document.getElementById(imageId).style.className="greenClass";
}
回答by Exception
Create one class with your styles. For example
用你的风格创建一个类。例如
.selected{
border : 1px solid green;
}
Then apply the className on click of the item. Avoid using setAttribute to set Class name of a item. It is having some issues. Then onclick of the image remove the selected class name on all items and then apply class name selected to the target image.
然后在单击项目时应用 className。避免使用 setAttribute 来设置项目的类名。它有一些问题。然后单击图像删除所有项目上的选定类名，然后将选定的类名应用于目标图像。
