Question

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

如下所示＆＃34; list 2＆＃34;突出显示。

<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实现此目的？

Answer 1

非常简单（vanilla JS）：

// Query entries:
var entries = document.querySelectorAll('#entries ul li a');        

// Clean up entries styles
for(var i = 0; i < entries.length; i++){
      var style = entries[i].style;
      style.backgroundColor = null;
      style.color = null;
    }        

// Pick random index
var randomIdx = Math.floor(Math.random() * entries.length);

// Pick random entry's style
var randomEntryStyle = entries[randomIdx].style;

// Set styles
randomEntryStyle.backgroundColor = '#000';
randomEntryStyle.color = '#fff';

JS Bin

Answer 2

首先，您需要在数组中选择所有这些列表元素。您可以通过编写：

来完成此任务

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

然而，如果你给他们一个班级名称“条目”，那么你可以这样做：

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，并将其应用于所选元素。

电贺！

Answer 3

使用以下代码，您可以为随机元素 background 和 text 获取随机颜色。

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();

<强>段：

/* ----- JavaScript ----- */
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();

<!----- HTML ----->
<div id="entries">
  <ul style="list-style-type: none;">
    <li><a href="#1">list 1</a></li>
    <li><a href="#2">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>

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

3 个答案: