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的人。

您可以使用div

循环遍历多个元素，例如each()个标记

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方法。例如：

$(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 Fiddle demo

解决divs JavaScript的背景颜色

5 个答案: