【问题标题】:Change background color of Div to value of variable using Javascript使用 Javascript 将 Div 的背景颜色更改为变量的值
【发布时间】:2016-02-15 15:49:28
【问题描述】:

我一直在尝试将 div 的颜色更改为随机生成的十六进制颜色代码,该代码传递给变量。我该如何完成这项工作?

HTML

<p id="demo">NULL</p>
<button onclick="generatePassword()">Generate</button>
<div id="showcase" style="background: #FFFFFF; width: 200px; height: 200px; margin: 20px; border-radius: 3px;"></div>

JAVASCRIPT

var result = document.getElementById('demo').innerHTML;

function generatePassword() {
    var length = 6,
        charset = "ABCDEF0123456789",
        retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
        retVal += charset.charAt(Math.floor(Math.random() * n));
    }
    document.getElementById('demo').innerHTML = "#" + retVal;
    return document.getElementById('showcase').style.backgroundColor = retVal;
}

小提琴链接:https://jsfiddle.net/elliotsoomro/gngg89t5/5/

【问题讨论】:

    标签: javascript html css background styles


    【解决方案1】:

    你几乎搞定了,这里是修复:https://jsfiddle.net/yL1uu6bz/1/

    var result = document.getElementById('demo').innerHTML;
    
    function generatePassword() {
        var length = 6,
            charset = "ABCDEF0123456789",
            retVal = "";
        for (var i = 0, n = charset.length; i < length; ++i) {
            retVal += charset.charAt(Math.floor(Math.random() * n));
        }
        var finalVal = "#" + retVal;
        document.getElementById('demo').innerHTML = finalVal;
        return document.getElementById('showcase').style.backgroundColor = finalVal;
    }
    

    我只是添加了井号并以与输出值 ("#" + retVal) 相同的方式附加它,我将其添加到变量 (finalVal) 中并改为输出。

    【讨论】:

    • 非常感谢!一整天都在想办法解决这个问题!
    • @E.Soomro,总是简单的也能吸引我!
    • @E.Soomro,如果答案对您有帮助,请将其标记为正确,以便将来对其他人有所帮助...
    猜你喜欢
    • 1970-01-01
    • 2018-02-10
    • 2010-12-24
    • 2013-08-20
    • 2011-10-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-15
    相关资源
    最近更新 更多