循环遍历类和改变颜色

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>