名称中带“-”的Javascript样式变量无法更改？_Javascript

名称中带“-”的Javascript样式变量无法更改？

javascript

名称中带“-”的Javascript样式变量无法更改？,javascript,Javascript,好吧，这个bug花了我不少时间和尴尬。似乎任何名称中带有-的样式变量都不能被javascript修改如图所示： <!DOCTYPE html> <html lang="en"> <head> <title>Class Test</title> <meta charset="utf-8" /> <style> body { text-

好吧，这个bug花了我不少时间和尴尬。似乎任何名称中带有-的样式变量都不能被javascript修改

如图所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Class Test</title>
        <meta charset="utf-8" />
        <style>
            body { text-align: center; background-color: #ffffff;}
            #box { position: absolute; left: 610px; top: 80px; height: 50px; width: 50px; background-color: #ff0000; color: #000000;}
        </style>

        <script type="text/javascript">
            var box = 0;
        </script>
    </head>

    <body>
        <div id="box" ></div> 
        <script type="text/javascript">
            box = document.getElementById('box');
            box.style.background-color = "#0000ff";
        </script>

    </body>
</html>

上述示例中的框将保持红色

那么如何更改名称中带有-的样式变量呢？

backgroundColor，camelCase.

backgroundColor字面意思是背景中的值减去颜色中的值

你想要背景色吗

非常感谢你。我会尽快接受这个答案。