使用 javascript 变量更改 css 背景颜色

Question

I am trying to set the div 'changebox' with the color of the rgb which is the result of the three randoms. The rgbs are changing, (i can tell by the document.writes), but the div just stays white no matter what the rgb is. Please help get the box to change to the correct color of the rgb.

<div id="changeBox" style="width: 150px; height: 150px; position: absolute; top: 10%; left: 10%; background-color: white; border: 4px solid black; color: black; font-family: 'Merriweather Sans', sans-serif;">

<script>
var randR = Math.floor(Math.random() * 255) + 1;
document.write(randR+", ");
var randG = Math.floor(Math.random() * 255) + 1;
document.write(randG+", ");
var randB = Math.floor(Math.random() * 255) + 1;
document.write(randB);

document.getElementById('changeBox').style = "background-color: rgb(" + randR + ", " + randG + ", " + randB + ");";
</script>

</div>

Answer 1

Don't directly assign to style . Assign to style.backgroundColor .

Answer 2

You should change only background-color property:

document.getElementById('changeBox').style.backgroundColor = "rgb(" + randR + ", " + randG + ", " + randB + ")";

In this case remove tailing ; to make value valid.

Demo: http://jsfiddle.net/zc16vmjt/

Another thing is that document.write is not very good practice. It's easy to avoid it in this case and go with appendChild :

var box = document.getElementById('changeBox');
var randR = Math.floor(Math.random() * 255) + 1;
var randG = Math.floor(Math.random() * 255) + 1;
var randB = Math.floor(Math.random() * 255) + 1;
box.appendChild(document.createTextNode(randR + ", " + randG + ", " + randB));
box.style.backgroundColor = "rgb(" + randR + ", " + randG + ", " + randB + ")";

Demo: http://jsfiddle.net/zc16vmjt/1/

Answer 3

Each time when you:

document.write();

You are overwriting what's in the body of the entire document, removing the div entirely.

var randR = Math.floor(Math.random() * 255) + 1;
var randG = Math.floor(Math.random() * 255) + 1;
var randB = Math.floor(Math.random() * 255) + 1;

document.getElementById('changeBox').style.backgroundColor = "rgb(" + randR+ "," + randG+ "," + randB + ")";

Try this and you should be fine. If you want to see the values, output to a separate div; Just don't overwrite the entire document with document.write();

Answer 4

You have an extra semi-colon and are missing a closing quotation mark.

To keep track of your nested quotes, it's a good idea to alternate between single and double quotes. Doing so makes it easier to realize that after the closing parenthesis, there should be a quote mark to close that and that should be followed by a quote that matches the beginning quote, before background-color.

var theBox = document.getElementById('changeBox');
theBox.style = "background-color: rgb('+ randR+ ',' +randG+ ','+randB+')'";

Answer 5

In 2022 I am doing like this:

 let box = document.getElementsByClassName('color-box'); function changeColor(){ let random = Math.floor(Math.random()*9999999).toString(15); console.log(random) box[0].style.background = "#" + random; }

 .color-box{ height: 100px; width: 100px; border: 1px solid; }

 <div class="color-box" onclick="changeColor()"></div>