Javascript style variables with "-" in their name aren't able to be changed?
<p>Okay, so this bug has cost me quite a bit of time and embarrassment. It seems that any style variable with a - in it's name can't be modified by javascript.</p>

<p>As seen here:</p>

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

        &lt;script type="text/javascript"&gt;
            var box = 0;
        &lt;/script&gt;
    &lt;/head&gt;

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

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>The box in said example will just remain red.</p>

<p>So how do I change a style variable with a - in it's name?</p>
