如何使用普通Javascript随机应用CSS样式？

我有几个列表条目，我想随机突出显示，1个项目只有不同的背景和文本颜色

如下所示，突出显示“列表2”

<div id="entries">
    <ul style="list-style-type: none;">
        <li><a href="#1">list 1</a></li>
        <li><a href="#2" style="color:#fff; background-color:#000">list 2</a></li>
        <li><a href="#3">list 3</a></li>
        <li><a href="#4">list 4</a></li>
        <li><a href="#5">list 5</a></li>
    </ul>
</div>

我如何在不使用jQuery的情况下使用vanilla javascript实现这一点？

非常简单（vanilla JS）：

//查询条目：
var entries=document.queryselectoral（“#entries ul li a”）；
//清理条目样式
对于（变量i=0；i

---

首先，您需要在数组中选择所有这些列表元素。您可以通过以下方式完成此任务：

var elements = document.getElementById("entries").getElementsByTagName("li");

不过，如果您给他们一个类名“entry”，那么您可以执行以下操作：

var elements = document.getElementsByClassName("entry")

这将更加安全，因为您无法获取任何嵌套的

li

-元素。
接下来，我们要从中随机选择一个。您可以编写以下内容：

var chosen = elements[Math.floor(Math.random()*elements.length)];

现在只需应用所需的css：

choosen.setAttribute("style", "color:white; background-color: black");

或者，为了使它更干净，创建一个名为“selected”的css类，定义css，并将其应用于所选元素

---

欢迎

使用以下代码，您可以为随机元素的

背景和
文本获得随机颜色

var
  elements = document.querySelectorAll('#entries ul li a'),
  index = Math.floor(Math.random() * elements.length),
  props = ["color", "backgroundColor"],
  colour = function() {
    return "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
  };

for (var i = 0; i < props.length; i++) elements[index].style[props[i]] = colour();

var
elements=document.queryselectoral（“#entries ul li a”），
index=Math.floor（Math.random（）*elements.length），
道具=[“颜色”，“背景颜色”]，
颜色=功能（）{
返回“#”+（Math.random（）*0xFFFFFF>“Math.round（Math.random（）*（entries.length-1））；”不是一个好主意，因为它不会给你一个均匀的分布。第一个和最后一个项目只有一半的机会，其他项目有。@syntac是的，你是对的。我没有想过。这个选项更好：
Math.floor（Math.random（）*条目长度）；
var
  elements = document.querySelectorAll('#entries ul li a'),
  index = Math.floor(Math.random() * elements.length),
  props = ["color", "backgroundColor"],
  colour = function() {
    return "#" + (Math.random() * 0xFFFFFF << 0).toString(16);
  };

for (var i = 0; i < props.length; i++) elements[index].style[props[i]] = colour();