如何使用純Javascript隨機應用CSS樣式？

-3

我有幾個我想隨機突出顯示的列表條目，只有不同背景和文本顏色的條目。如何使用純Javascript隨機應用CSS樣式？

如下所示，突出顯示「列表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>

我該如何使用香草javascript實現此功能而無需使用jQuery？

來源

2016-10-09 KDX

很容易（香草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

來源

2016-10-09 02:51:53

> 「Math.round（的Math.random（）*（entries.length - 1））;」不是一個好主意，因爲它不會給你一個平均分配。第一個和最後一個項目只有一半的機會，其他項目有。 – Syntac

@syntac是的，你是對的。我沒有想到這一點。這個選項更好： 'Math.floor（Math.random（）* entries.length）;' –

首先，你將需要一個陣列內的所有這些列表元素以供選擇。

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

比較好，然而這將是，如果你給他們一個類名「項」，那麼你可以做：

var elements = document.getElementsByClassName("entry")

這將是更安全的，因爲你可以通過書面形式完成此你不能得到嵌套的li -elements。
接下來，我們要隨機選擇一個。你可以寫：

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

現在只適用於你所需要的CSS：

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

或者，甚至使之清潔，創建一個名爲「選擇」 CSS類，定義CSS，並將其應用於所選元素。

迎接！

來源

2016-10-09 02:54:16 Syntac

用下面的代碼，你可以得到一個隨機顏色的隨機元素的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>

來源

2016-10-09 03:22:39

如何使用純Javascript隨機應用CSS樣式？

回答

相關問題