解决divs JavaScript的背景色

Question

我正在尝试定位多个div并一次随机更改背景颜色（或其他属性）。 我已经能够使用document.body.style.background定位身体背景，但是我不确定这是否可以与多个元素一起使用。 任何见解都会很好。

这是我尝试使用的一些代码：

 function randBGcolor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
        for (var i=0; i<6; i++ ) {
            color += letters[Math.round(Math.random() * 15)];
        }
   document.body.style.background = color;
}

我仍想使用随机颜色功能，但只需单击一下即可将其应用于许多元素。

Answer 1

使用jQuery和您的函数：

function randBGcolor() {
   var letters = '0123456789ABCDEF';
   var color = '#';
      for (var i=0; i<6; i++ ) {
         color += letters[Math.round(Math.random() * 15)];
      }
   return color;
}

$('#button').on('click', function() {
    $('div.classname').css('background-color', randBGcolor());
})

Answer 2

我认为您可以使用JQuery完成此工作，也许可以找到知道纯JS知识的人。

您可以使用each()遍历多个元素，例如div标签

http://jsfiddle.net/Kwb49/-此示例在单击主体时更改了所有divs

$(document).ready(function() {

    $('body').click(function() {
       $('div').each(function() {
            var bgcolor = randBGcolor();
            $(this).css({ "background" : bgcolor });
        }); 
    });

});

function randBGcolor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i=0; i<6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

Answer 3

纯JS解决方案：

http://jsfiddle.net/Kwb49/3/ （更新了小提琴，可以单击，添加了一个测试按钮）

function randBGcolor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
        for (var i=0; i<6; i++ ) {
            color += letters[Math.round(Math.random() * 15)];
        }

    return color;

}



 divs=document.getElementsByTagName('div');

    for(i=0;i<divs.length;i++) {
    divs[i].style.backgroundColor=randBGcolor();
    }

Answer 4

css方法可与回调函数一起使用，以便您可以选择要更改的所有元素，并通过一次调用为每个元素获得单独的背景色：

function randBGcolor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * letters.length)];
  }
  return color;
}

$('.someelements').css('background-color', randBGcolor);

演示： http ： //jsfiddle.net/Guffa/Tp856/

要在click事件中使用它，只需在ready事件中使用click方法。 例：

$(document).ready(function(){
  $('.someelement').click(function(){
    $('.someelements').css('background-color', randBGcolor);
  });
});

注意：计算随机数时， 请勿使用Math.random 。 这将使最低和最高值的选择频率是其他值的一半。 将Math.floor和mulitply与更高的数字一起使用。

Answer 5

我建议在兼容的浏览器中使用纯JavaScript的一种方法是：

function randColor(n) {
    var result = [];
    for (var i = 0; i < n; i++) {
        result.push(Math.floor(Math.random() * 255));
    }
    return result.join(',');
}

function randBGColor () {
    return 'rgb(' + randColor(3) + ')';
}

var els = document.querySelectorAll('div');

[].forEach.call(els, function(a) {
    a.style.backgroundColor = randBGColor();
});

JS小提琴演示 。