按需为 div 提供真正的随机颜色答案

【问题标题】：True random color for div on demand按需为 div 提供真正的随机颜色
【发布时间】：2013-07-27 10:00:35
【问题描述】：

我试图在页面加载时使用随机颜色作为<div>，或者在刷新时按需使用，但它不起作用。我的代码：

<head>
    <script type='text/javascript'>//<![CDATA[ 
        document.onload=function(){
            var red = Math.floor((Math.random()*256)+0);
            var blue = Math.floor((Math.random()*256)+0);
            var green = Math.floor((Math.random()*256)+0);
            var coloredDiv =  document.createElement("div");

            document.getElementById("coloredDiv");
            coloredDiv.style["background-color"] = 'rgb('+red+','+green+','+blue+')';
        }//]]>  
    </script>
</head>

<body>
    <div id="coloredDiv">A div that changes color randomly??!?!?!?!</div>
    <a href="javascript:void(0);" onClick="javascript: location.reload(true);">Go again!</a>
</body>

【问题讨论】：

问题到底是什么？

标签： javascript html css random styles

【解决方案1】：

您可以使用以下任一选项设置background-color：

选项 1：

window.onload=function(){
    var red = Math.floor((Math.random()*256)+0);
    var blue = Math.floor((Math.random()*256)+0);
    var green = Math.floor((Math.random()*256)+0);
    var coloredDiv =document.getElementById("coloredDiv");
    coloredDiv.style.backgroundColor = 'rgb('+red+','+green+','+blue+')';
}

选项 2：

coloredDiv.style["backgroundColor"] = 'rgb('+red+','+green+','+blue+')';

需要注意的关键是，每当我们使用 JS 为其中有连字符的 CSS 属性设置值（如background-color）时，应删除连字符并删除第二个和后续单词的第一个字母应该大写。

【讨论】：

我收回我的回答。切换到 window 而不是 document 可能会有所帮助。我有同样的想法，但被 jsFiddle 卡住了，试图仔细检查它。 jsFiddle 是否有可能不调用window.onload？
@shennan 在左侧栏的框架和扩展部分下，选择“onLoad”以外的任何选项，window.onload 将起作用。