时间戳

首页 > 解决方案 > 选择一个随机的 HTML 元素

javascript - 选择一个随机的 HTML 元素

问题描述

我试图制作一个脚本来选择一个随机元素并更改它的 css 元素。它们都有 id，但与我使用函数制作它们时相同。

const display = document.getElementsByClassName('display')[0];
function grid() {
    for(let i = 0; i < 6; i++) {
        for(let j = 0; j < 4; j++) {
             square = document.createElement('div');
            square.className = 'square';
            display.appendChild(square);
        }
    }
};

grid();

以上是我用来制作元素的函数，但我不知道如何制作，所以我可以随机选择其中一个。

标签： javascripthtmlcss

解决方案

使用纯 JavaScript：

普通的 JavaScript 读起来可能有点冗长/复杂，但它是独立的，所以它是不喜欢使用库的开发人员的最佳选择。

var squares = document.querySelectorAll(".square");
squares[Math.floor(Math.random() * squares.length)].style.background = "red";
.square{
  display:inline-block;
  width:50px;
  height:50px;
  background:blue;
}
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

使用 Rando.js：

Rando.js 使随机性更易于阅读，同时也增加了随机性的熵（因此人们无法预测下一个“随机”结果将是什么）。

rando(document.querySelectorAll(".square")).value.style.background = "red";
.square{
  display:inline-block;
  width:50px;
  height:50px;
  background:blue;
}
<script src="https://randojs.com/2.0.0.js"></script>

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

使用 Rando.js 和 jQuery（我会做什么）

Rando.js 处理随机性，而 jQuery 使元素选择和样式编辑更易于阅读。

rando($(".square")).value.css({background: "red"});
.square{
  display:inline-block;
  width:50px;
  height:50px;
  background:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://randojs.com/2.0.0.js"></script>

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

推荐阅读