循環遍歷類和改變顏色

Question

我需要一點幫助，這可能看起來很簡單，但我的網頁上有一個反色按鈕，我需要遍歷類名爲text的元素。

下面的代碼：

//Javascript File 
 

 
var text = document.getElementsByClassName('text'); 
 
var button = document.getElementById('invertcolors'); 
 

 
function onClick() { 
 
    for (var i = 0; i < text.length; i++) { 
 
    //Do something like this: 
 
    //text[i].style.color = 
 
    } 
 
} 
 

 
button.addEventListener('click', onClick, false);

<!--Stuff here...--> 
 
<div id="content"> 
 
    <font id="text1" class="text">I walked in the forest</font> 
 
    <br> 
 
    <font id="text2" class="text">Through the grey concrete path</font> 
 
    <br> 
 
    <font id="text3" class="text">Holding on the dog</font> 
 
</div> 
 
<!--Stuff here...-->

我需要遍歷變量i的元素，它們的顏色設置爲白色。我不知道怎麼樣，有人可以幫忙嗎？謝謝！

Answer 1

請檢查下面的javascript代碼：

var text = document.getElementsByClassName('text'); 
var button = document.getElementById('invertcolors'); 

function onClick() { 
var selectedId 
console.log(text[0].getAttribute('id')); 
    for (var i = 0; i < text.length; i++) { 
    console.log(text[i].getAttribute('id')); 
    selectedId = text[i].getAttribute('id'); 
    document.getElementById(selectedId).style.color = "white"; 
    } 
} 

button.addEventListener('click', onClick, false); 

而且還檢查代碼@https://jsfiddle.net/cskcvarma/akLx5tt8/7/

請讓我知道，如果這有助於。

Answer 2

var text = document.getElementsByClassName('text'); 
var button = document.getElementById('invertcolors'); 

function onClick(text) { 
    for (var i = 0; i < text.length; i++) { 
    text[i].style.color = '#fff'; 
    } 
} 

button.addEventListener('click', onClick.bind(null, text), false); 

Answer 3

你幾乎有確切的代碼，你會需要，見下面的工作版本，你想要的。

var text = document.getElementsByClassName('text'); 
 
var button = document.getElementById('invertcolors'); 
 

 
function onClick() { 
 
    for (var i = 0; i < text.length; i++) { 
 
    text[i].style.color = '#f00'; 
 
    } 
 
} 
 

 
button.addEventListener('click', onClick, false);

#invertcolors { 
 
    height:20px; 
 
    width:100px; 
 
    border:1px solid black; 
 
    border-radius:7px; 
 
    }

<div id="content"> 
 
    <font id="text1" class="text">I walked in the forest</font> 
 
    <br> 
 
    <font id="text2" class="text">Through the grey concrete path</font> 
 
    <br> 
 
    <font id="text3" class="text">Holding on the dog</font> 
 
</div> 
 
<div id='invertcolors'>Button</div>

Answer 4

您可以使用querySelectorAll方法來做到這一點。 HTML5中不支持<font>元素，因此應將其替換爲例如<span>元素。

var button = document.getElementById('click'); 
 

 
button.addEventListener('click',function(){ 
 
    var elements = document.querySelectorAll('.text'); 
 
    elements.forEach(function(a){ 
 
    \t a.style.backgroundColor = 'yellow'; 
 
    }); 
 
});

<div id="content"> 
 
    <span id="text1" class="text">I walked in the forest</span> 
 
    <br> 
 
    <span id="text2" class="text">Through the grey concrete path</span> 
 
    <br> 
 
    <span id="text3" class="text">Holding on the dog</span> 
 
</div> 
 

 
<br/> 
 

 
<button id="click">change style</button>