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

Question

我正在尝试使用 rgb 的颜色设置 div 'changebox'，这是三个随机数的结果。 rgb 正在变化，（我可以通过 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

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

Answer 2

你应该只更改 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 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

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

要跟踪嵌套引号，最好交替使用单引号和双引号。这样做可以更容易地意识到在右括号之后应该有一个引号来结束它，并且应该在 background-color 之前跟一个与开始引号相匹配的引号。

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

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

changing css background color with javascript variables

javascript

css

variables