Question

我正在尝试使用rgb的颜色设置div'changebox'，这是三个random的结果。 rgbs正在改变，（我可以通过document.writes来判断），但无论rgb是什么，div都会保持白色。请帮助让方框更改为正确的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

您应该只更改background-color属性：

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

在这种情况下，请删除尾部;以使值有效。

演示： http://jsfiddle.net/zc16vmjt/

另一件事是document.write不是很好的做法。在这种情况下很容易避免它，并使用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 + ")";

演示： http://jsfiddle.net/zc16vmjt/1/

Answer 2

不要直接分配给style。分配给style.backgroundColor。

Answer 3

每当你：

document.write();

您正在覆盖整个文档正文中的内容，完全删除div。

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 + ")";

试试这个，你应该没问题。如果要查看值，请输出到单独的div;请勿使用document.write（）;

覆盖整个文档

Answer 4

你有一个额外的分号，并且缺少一个右引号。

要跟踪嵌套引号，最好在单引号和双引号之间切换。这样做可以更容易地意识到，在关闭括号之后，应该有一个引号来关闭它，并且应该在背景颜色之前跟一个与起始引号匹配的引号。

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

用javascript变量改变css背景颜色

4 个答案: