Question

JavaScript和CSS新手，我试图给用户一个按钮，按下时会随机改变游戏板的背景颜色（用div设置）。

<style type="text/css">
    div.conway {
        overflow: hidden;
        font-family: courier;
        float: left;
        width: 800px;
        height: 488px;
        background-color: green;
        font-size: 10px;
        color: gold;
    }
</style>

在我的脚本标签内，我有以下内容：

     function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

    my.changeBackgroundColor = function () {
        document.getElementById(conway).style.background-color = getRandomColor();                
    }

但DOM不允许我分配新颜色。我做错了什么？

Answer 1

background-color应为backgroundColor：

document.getElementById(conway).style.backgroundColor = getRandomColor();

或允许这样做：

document.getElementById(conway).style["background-color"] = getRandomColor();

在JavaScript中，您可以使用点分表示法和属性名称 literal （obj.foo）引用对象属性，或使用括号表示法和属性名称 string （obj["foo"]）。属性名称 literal 必须是有效的JavaScript标识符，显然您不能在标识符中包含-，它看起来像一个减号。因此，使用camelCase时连字符通常位于样式对象中。

附注：您尚未显示您的HTML或conway变量的内容，但我假设您对相关元素有id，并且{{1}变量包含conway。 E.g：

id

和

<div id="cell23">...</div>

Answer 2

尝试使用backgroundColor代替style。

JS将-视为减号运算符。

Answer 3

问题是您尝试使用document.getElementById(conway)按ID访问DOM元素，但conway是类。因此，您必须为目标div提供ID或使用document.getElementsByClassName('conway');，这将有效地获取具有类名conway的所有元素。不确定这是不是你想要的。

Answer 4

您正在拨打错误的财产。它应该是：

my.changeBackgroundColor = function() {
      document.getElementById(conway).style.backgroundColor = getRandomColor();      
}

Answer 5

这是 js fiddle example

您的代码中几乎没有问题，

行：

document.getElementById(conway).style.background-color = getRandomColor();

应定义为:(请参阅如何编写backgroundColor以及＆＃34的使用;＆＃34;用于id）。

document.getElementById("conway").style.backgroundColor = getRandomColor();

另外，请记住将您的样式应用于id元素（无法查看您的div是否已定义类conway。）

div#conway { .. }

之后它很有效。

我还建议您检查 CSS properties reference ，其中列出了使用javascript提供css属性的格式。换句话说，你遇到的问题。！

干杯。

试图改变颜色，但不知道如何从JavaScript更改div元素

5 个答案: