Question

我在主体内部有一个元素网格，如下所示：

<ul>
<li data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg" data-thumbnail-overlay-color="">
    <div>
        <p class="gallery1DecHeader">my description</p>  
    </div>                                
</li>
</ul>

我的目的是使用这样的JavaScript函数随机化data-thumbnail-overlay-color=""：

'#'+Math.floor(Math.random()*16777215).toString(16);

由于我不熟悉JavaScript，应该如何编写这个目的？

Answer 1

使用jQuery，为标记设置id，生成十六进制颜色代码，并使用attr（）函数进行设置：

<ul>
<li id="theTag_1" data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg" data-thumbnail-overlay-color="">
    <div>
        <p class="gallery1DecHeader">my description</p>  
    </div>                                
</li>
<li id="theTag_2" data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg" data-thumbnail-overlay-color="">
    <div>
        <p class="gallery1DecHeader">my second description</p>  
    </div>                                
</li>
... // more elements here with unique id each ("theTag_" + number)
</ul>

<script>
function setColorToID(id) {
    var hexNumbers = '0123456789ABCDEF'.split(''); // convert to array
    var color = '#';
    for (var x = 0; x < 6; x++ ) {
       color += hexNumbers[Math.floor(Math.random() * 16)];
    }
    $(id).attr("data-thumbnail-overlay-color" , color);
}

$('[id^="theTag_"]').each(function(){
        setColorToID(this.id);
    });
</script>

如果您不想为每个设置和ID，这是页面中的唯一列表：

    <script>
    function setColorToID(id) {
        var hexNumbers = '0123456789ABCDEF'.split(''); // convert to array
        var color = '#';
        for (var x = 0; x < 6; x++ ) {
           color += hexNumbers[Math.floor(Math.random() * 16)];
        }
        $(id).attr("data-thumbnail-overlay-color" , color);
    }

$("li").each(function() {
            setColorToID(this);
        });
    </script>

Answer 2

＆＃13;

function get_random_color(){  
  var letters = '0123456789ABCDEF'.split(''); 
  var color = '#'; 
  for (var i = 0; i < 6; i++ ) { 
      color += letters[Math.floor(Math.random() * letters.length)]; 
    } 
  return color; 
  }

function GRC() {  
 var r = 'rgba('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+', '+Math.floor(Math.random()*255)+', '+Math.random()+')'; 
  return r;
}


var lis = document.querySelectorAll('li');
for(i=0;i<lis.length;i++){
    if(lis[i].hasAttribute('data-thumbnail-overlay-color')){
      var randomColor =  get_random_color()
      lis[i].setAttribute('data-thumbnail-overlay-color', randomColor);
      lis[i].setAttribute('style', 'color:'+randomColor);
      }
  }

＆＃13;

<ul>
<li data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg" data-thumbnail-overlay-color="">
    <div>
        <p class="gallery1DecHeader">my description</p>  
    </div>                                
</li>
</ul>
<ul>
<li data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg" data-thumbnail-overlay-color="">
    <div>
        <p class="gallery1DecHeader">my description</p>  
    </div>                                
</li>
</ul>
<ul>
<li data-thumbnail-path="content/media/thumbnails/1.jpg" data-url="content/media/images/1.jpg">
    <div>
        <p class="gallery1DecHeader">my description</p>  
    </div>                                
</li>
</ul>

＆＃13;

Answer 3

如果您使用的是jQuery，可以这样做：

您可以使用RGB属性与Math.floor((Math.random() * 250) + 1); 你可以从0-250生成3个不同的值。请记住：rgb适用于(0-250, 0-250, 0-250)

现在你可以简单地拿走你的对象了。让它变得有趣对于这个例子，因为我不知道data-thumbnail-overlay-color=""

上的属性值，因此随机化了背景颜色

function randomColor(object){
   var red = Math.floor((Math.random() * 250) + 1);;
   var green = Math.floor((Math.random() * 250) + 1);
   var blue = Math.floor((Math.random() * 250) + 1);
   //
   $(object).css('background-color', 'rgb('+red+', '+green+', '+blue+')');
}

如何编写一个函数来随机化属性的颜色

3 个答案: