时间戳

首页 > 解决方案 > 使用按钮更改多个 div 的边框颜色

javascript - 使用按钮更改多个 div 的边框颜色

问题描述

我对此完全陌生，并且正在编写一个脚本，该脚本将在单击按钮时更改正文背景颜色和一些 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>

标签： javascripthtmlcss

解决方案

使用代码如下：

        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>

推荐阅读