일반 Javascript를 사용하여 임의로 CSS 스타일을 적용하려면 어떻게해야합니까?

Question

나는 무작위로 강조 표시하려는 몇 가지 목록 항목이 있으며 배경 및 텍스트 색상이 다른 항목 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를 사용하지 않고 바닐라 자바 ​​스크립트를 사용하여 이것을 수행 할 수 있습니까?

Answer 1

아주 쉽게 (바닐라 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"); 

하거나, 심지어 청소기, "선택"라는 CSS 클래스를 만들려면 CSS를 정의하려면 선택한 요소에 적용합니다.

Greets! 다음 코드와

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>