其名稱中帶有「 - 」的Javascript樣式變量無法更改？

好的，所以這個bug花了我相當多的時間和尷尬。似乎任何帶有 - 名稱的樣式變量都不能被javascript修改。其名稱中帶有「 - 」的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>

在

盒子說，例如將只停留紅色。

那麼，如何改變一個樣式變量 - 在它的名字？

來源

2010-06-13 William