我有一个页面,用户需要为T恤选择一种颜色。
当用户选择颜色时,我希望图像的边框颜色变为绿色。
如果用户点击其他颜色,则需要恢复默认边框颜色并更改所单击的新图像的边框颜色。
Here正是我想要做的。
知道我该怎么做吗?
答案 0 :(得分:3)
假设您的图片使用img
标记显示如下:
<img name="img01" id="img01" src="image.gif" border="2" bordercolor="#000000">
实现onClick fnction 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";
}
答案 1 :(得分:1)
使用您的样式创建一个类。例如
.selected{
border : 1px solid green;
}
然后在点击该项目时应用className。避免使用setAttribute设置项的类名。它有一些问题。然后单击图像,删除所有项目上的选定类名,然后将选择的类名应用于目标图像。