Question

我有这个javascript，我需要每个元素＆＃34; title＆＃34;用不同的随机颜色着色。我完成了第一个着色。有可能的？感谢

var randomColor = Math.floor(Math.random()*16777215).toString(16);
document.getElementById('title').style.color = randomColor;

<div id="title"><a>TEXT1</a></div>...<div id="title"><a>TEXT2</a></div>...

Answer 1

正如我已经评论过的，您不能使用重复的ID，而是更喜欢使用class并相应地修改您的代码。

＆＃13;

var getElm = document.getElementsByClassName('title');
for(var i = 0, l = getElm.length; i < l; i++) {
  var randomColor = Math.floor(Math.random() * 16777215).toString(16);
  getElm[i].style.color = '#' + randomColor;
}

＆＃13;

<div class="title"><a>TEXT1</a></div>
<div class="title"><a>TEXT2</a></div>

＆＃13;

上述代码如何工作的一些解释：我使用的是getElementsByClassName，它会返回一系列您要定位的元素，在这种情况下，它是class名称为title的元素。然后我循环它们，生成一个新的随机十六进制，并将它分配给循环元素。

请确保您不要忘记将您的十六进制代码与#

连接起来

Answer 2

只需调用 changeColor（）; 函数。

$(function(){
changeColor();
});

function changeColor() {
    var paragraphs = document.getElementsByTagName("p");
   
    for(var i = 0; i < paragraphs.length; i++)
    {
        var innerText = paragraphs[i].innerText;
        var innerTextSplit = innerText.split("");
        paragraphs[i].innerText = ""
       
        for(var j = 0; j < innerTextSplit.length; j++) {
            var randomColor =getRandomColor();
 
            innerTextSplit[j] = '<span style="color: ' + randomColor + '">' + innerTextSplit[j] + '</span>';
            paragraphs[i].innerHTML += innerTextSplit[j];
        }
    }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>abcdefthuild</p>
<p>abcdefthuild</p>
<p>abcdefthuild</p>
<p>abcdefthuild</p>
<p>abcdefthuild</p>

Answer 3

像这样使用。没有classname

使用document.querySelectorAll()。它将选择元素。
然后使用Array#forEach
您在dom中缺少#添加颜色

document.querySelectorAll("div[id='title']").forEach(function(a){
var randomColor = Math.floor(Math.random()*16777215).toString(16);
a.style.color ='#'+randomColor;
})

<div id="title"><a>TEXT1</a></div>
<div id="title"><a>TEXT2</a></div>
<div id="title"><a>TEXT2</a></div>
<div id="title"><a>TEXT2</a></div>
<div id="title"><a>TEXT2</a></div>
<div id="title"><a>TEXT2</a></div>...

Answer 4

<强> HTML

var elements = document.getElementsByClassName('title');
var usedColors = {};
var getRandomColor = function() { 
    var randomColor = Math.floor(Math.random()*16777215).toString(16);
        while(usedColors[randomColor] === 1) {
      randomColor = Math.floor(Math.random()*16777215).toString(16);
    }
    usedColors[randomColor] = 1;
    return randomColor;
};

for (var i = 0; i < elements.length; i++ ) {
    var randomColor = getRandomColor();
      elements[i].style.color = "#"+randomColor;
}

JS

<a  ui-sref="app.register" translate="LOGIN.CREATE_ACCOUNT">Create an account</a>

<强>的jsfiddle https://jsfiddle.net/1cuwdLye/

每个标签的随机颜色

4 个答案: