Question

嗨所以我试图这样做，当点击一个按钮时，边框颜色变为蓝色，所有其他按钮边框颜色变为橙色。我的问题是，它没有工作边框颜色，其他按钮没有改变。

＆＃13;

function clickimageone(el){
	el.style.border = "1px solid blue";
	document.getElementById("border2").className="borderorange";
}

＆＃13;

.border1{
	border: 1px solid red;
}
.border2{
	border: 1px solid red;
}
.bordeorange{
	border: 1px solid orange;
}

＆＃13;

<div class="image"><img src="img/500.png" onclick="clickimageone(this)" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>

＆＃13;

所以基本上我要问的是，当点击一个按钮时，该按钮的边框变为蓝色，所有其他按钮颜色将变为橙色。

Answer 1

只需将getElementById修改为querySelector('.border2')即可 border2不是id，而是一个类。

Answer 2

将class更改为id，以便document.getElementById()正常工作

此处的工作代码：

＆＃13;

function clickimageone(el){
	el.style.border = "1px solid blue";
	document.getElementById("border2").style.border = "1px solid orange";
}

function clickimagetwo(el){
	el.style.border = "1px solid blue";
	document.getElementById("border1").style.border = "1px solid orange";
}

＆＃13;

#border1{
	border: 1px solid red;
}
#border2{
	border: 1px solid red;
}
.bordeorange{
	border: 1px solid orange;
}

＆＃13;

<div class="image"><img src="img/500.png" onclick="clickimageone(this)" id="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" id="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>

＆＃13;

单击按钮时更改边框颜色

2 个答案: