Question

对此我是全新的，正在开发一个脚本，该脚本将在单击按钮时更改主体背景颜色和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>

Answer 1

使用以下代码：

        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>

Answer 2

您可以添加一个单独的函数，并将点击事件附加到button1上，然后在函数内部使用querySelectorAll获取所有div，并像这样循环遍历它们的边框：

var divs = document.querySelectorAll('div[class^=hud-menu]');
for (var i = 0; i < divs.length; i++) {
    divs[i].style.borderColor = "#" + randcol
}

var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");

var allchar = "0123456789ABCDEF";

button1.addEventListener("click", changeBorderColor);
button2.addEventListener("click", myFun);

function changeBorderColor() {
  var randcol = "";
  for (var i = 0; i < 6; i++) {
    randcol += allchar[Math.floor(Math.random() * 16)];
  }

  var divs = document.querySelectorAll('div[class^=hud-menu]');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.borderColor = "#" + randcol
  }
}

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,
.hud-menu-2,
.hud-menu-3,
.hud-menu-4,
.hud-menu-5 {
  border: 4px solid 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>

Answer 3

如果您确实要更改所有 getElementsByTagName()元素，请使用div。如@לבנימלwantה指出，对于更复杂的网站，您可能需要使用getElementsByClassName()。

请注意，您不需要将函数与js绑定。您可以将其直接添加到按钮中。

function setDivBorderColor() {
    var divs = document.getElementsByTagName("div");
    for (var i = 0; i < divs.length; i++) {
        divs[i].style.borderColor = 'red'; // Use random color here
    }
}

* { 
  margin: 0.2em;
  padding: 0.2em;
}

div {
  border: solid 2px black;
}

<div>Test</div>
<div>Test</div>
<div>Test</div>

<!-- You can bind your function directly without js -->
<button onClick="setDivBorderColor()">Change Color</button>

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

3 个答案: