我对此完全陌生,正在编写一个脚本,该脚本将在单击按钮时更改主体背景颜色和一些 html div 的边框颜色。
我知道我可以通过单击按钮将主体背景颜色更改为随机颜色,但现在我陷入了如何使用单独的按钮对所有 div 边框执行相同操作并且所有 div 都有不同的类名,我想同时将它们全部更改为相同的随机颜色。
任何对我有帮助的想法,或者如果您能为我指明正确的方向,我将不胜感激。
var button2 = document.getElementById("button2");
var allchar = "0123456789ABCDEF";
button2.addEventListener("click", myFun);
function myFun() {
var randcol = "";
for (var i = 0; i < 6; i++) {
randcol += allchar[Math.floor(Math.random() * 16)];
}
document.body.style.backgroundColor = "#" + randcol;
}
.hud-menu-1 {
border-style: solid;
border-radius: 4px;
border-color: red;
}
.hud-menu-2 {
border-style: solid;
border-radius: 4px;
border-color: red;
}
.hud-menu-3 {
border-style: solid;
border-radius: 4px;
border-color: red;
}
.hud-menu-4 {
border-style: solid;
border-radius: 4px;
border-color: red;
}
.hud-menu-5 {
border-style: solid;
border-radius: 4px;
border-color: red;
}
<div class="hud-menu-1" style="text-align:center">
Text Here
</div>
<br>
<div class="hud-menu-2" style="text-align:center">
Text Here
</div>
<br>
<div class="hud-menu-3" style="text-align:center">
Text Here
</div>
<br>
<div class="hud-menu-4" style="text-align:center">
Text Here
</div>
<br>
<div class="hud-menu-5" style="text-align:center">
Text Here
</div>
<br>
<button id="button1">click me to change border color</button>
<button id="button2">click me to change background color</button>
最佳答案
使用代码如下:
document.getElementsByClassName("hud-menu-"+i)[0].style.borderColor = "#" + randcol;
这里:
var button2 = document.getElementById("button2");
var allchar = "0123456789ABCDEF";
button2.addEventListener("click", myFun);
function myFun() {
var randcol = "";
for (var i = 0; i < 6; i++) {
randcol += allchar[Math.floor(Math.random() * 16)];
}
document.body.style.backgroundColor = "#" + randcol;
}
function changeBorder(){
var randcol = "";
for (var i = 0; i < 6; i++) {
randcol += allchar[Math.floor(Math.random() * 16)];
}
for (var i = 1; i < 6; i++) {
document.getElementsByClassName("hud-menu-"+i)[0].style.borderColor = "#" + randcol;
}
}
.hud-menu-1 {
border-style: solid;
border-radius: 4px;
border-color: red;
}
.hud-menu-2 {
border-style: solid;
border-radius: 4px;
border-color: red;
}
.hud-menu-3 {
border-style: solid;
border-radius: 4px;
border-color: red;
}
.hud-menu-4 {
border-style: solid;
border-radius: 4px;
border-color: red;
}
.hud-menu-5 {
border-style: solid;
border-radius: 4px;
border-color: red;
}
<div class="hud-menu-1" style="text-align:center">
Text Here
</div>
<br>
<div class="hud-menu-2" style="text-align:center">
Text Here
</div>
<br>
<div class="hud-menu-3" style="text-align:center">
Text Here
</div>
<br>
<div class="hud-menu-4" style="text-align:center">
Text Here
</div>
<br>
<div class="hud-menu-5" style="text-align:center">
Text Here
</div>
<br>
<button id="button1" onclick="changeBorder()">click me to change border color</button>
<button id="button2">click me to change background color</button>
关于javascript - 使用按钮更改多个div的边框颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52146052/