尝试更改颜色，但不确定如何从JavaScript更改div元素

我是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>

康威分区{
溢出：隐藏；
字体系列：信使；
浮动：左；
宽度：800px；
高度：488px；
背景颜色：绿色；
字体大小：10px；
颜色：金色；
}

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

     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();                
    }  

函数getRandomColor（）{ 变量字母='0123456789ABCDEF'。拆分（''）； var color='#'； 对于（变量i=0；i<6；i++）{ 颜色+=字母[Math.floor（Math.random（）*16）]； } 返回颜色； } my.changeBackgroundColor=函数（）{ document.getElementById（conway.style.background-color=getRandomColor（）； }

---

但是DOM不允许我指定新颜色。我做错了什么？

尝试使用

backgroundColor

而不是

style

---

JS将

-

视为减号运算符。

尝试使用

背景色

而不是

样式

---

JS将

-

视为减号运算符。

背景色

应为

背景色

：

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

或者这也是允许的：

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

在JavaScript中，可以使用虚线表示法和属性名称文字（

obj.foo

）引用对象属性，也可以使用括号表示法和属性名称字符串（

obj[“foo”]

）。属性名称文字必须是有效的JavaScript标识符，显然标识符中不能有

-

，它看起来像减号。因此，在样式对象中通常使用连字符的地方使用camelCase

---

旁注：您没有显示HTML，也没有显示

conway

变量的内容，但是我假设您在所讨论的元素上有一个

id

，并且

conway

变量包含该

id

。例如：

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

---

背景色

应为

背景色

：

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

或者这也是允许的：

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

在JavaScript中，可以使用虚线表示法和属性名称文字（

obj.foo

）引用对象属性，也可以使用括号表示法和属性名称字符串（

obj[“foo”]

）。属性名称文字必须是有效的JavaScript标识符，显然标识符中不能有

-

，它看起来像减号。因此，在样式对象中通常使用连字符的地方使用camelCase

---

旁注：您没有显示HTML，也没有显示

conway

变量的内容，但是我假设您在所讨论的元素上有一个

id

，并且

conway

变量包含该

id

。例如：

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

---

问题是您试图使用

document通过ID访问DOM元素。getElementById（conway）

但是

conway

是一个类。因此，您要么给目标div一个ID，要么使用

document.getElementsByClassName（'conway'）

将有效地获取所有具有类名的元素

conway

。不确定这是否是您想要的。

问题是您试图使用

文档通过ID访问DOM元素。getElementById（conway）

但是

conway

是一个类。因此，您要么给目标div一个ID，要么使用

document.getElementsByClassName（'conway'）

将有效地获取所有具有类名的元素

conway

。不确定这是否是您想要的。

您调用了错误的属性。应该是：

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

---

你打错电话了。应该是：

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

这里正在工作

代码中没有什么问题

行：

应定义为：（参见backgroundColor是如何编写的以及id的“”用法）

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

在那之后它工作得很好

我还建议您选中，其中列出了用于使用javascript提供css属性的格式。换句话说，就是你遇到的问题

干杯。

这里正在工作

代码中没有什么问题

行：

应定义为：（参见backgroundColor是如何编写的以及id的“”用法）

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

在那之后它工作得很好

我还建议您选中，其中列出了用于使用javascript提供css属性的格式。换句话说，就是你遇到的问题

---

干杯。

如果div是用ID=“conway”？定义的，HTML在哪里？如果div是用ID=“conway”？定义的，HTML在哪里？要扩展这个，javascript不允许变量名中的

-

。这就是它将其视为减法运算符的原因。当您在JS中访问包含破折号的css和html属性时，必须将它们转换为mixedCase。要对此进行扩展，javascript不允许在变量名中使用

-

。这就是它将其视为减法运算符的原因。在JS中访问包含破折号的css和html属性时，必须将它们转换为mixedCase。