解決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小提琴演示 。