我有一个页面,用户需要为 T 恤选择颜色。
当用户选择一种颜色时,我希望图像的边框颜色变为绿色。
如果用户点击不同的颜色,它需要放回默认的边框颜色并更改被点击的新图像的边框颜色。
知道我该怎么做吗?
最佳答案
假设您的图片使用 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";
}
关于javascript - 更改图像边框颜色onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12832661/