cannot access rules in external CSSStyleSheet : <p>I am having trouble figuring out why <code>.cssRules</code> and <code>.rules</code> won't work in my simplistic color generator project.</p>

<p>I have a <code>&lt;link&gt;</code> element to link my external CSS file:</p>

<pre><code>&lt;link href="ColorGenerator.css" type="text/css" rel="stylesheet"&gt;
</code></pre>

<p>And a <code>&lt;script&gt;</code> element to link my external JS file before the <code>&lt;/html&gt;</code> element:</p>

<pre><code>  &lt;script src="ColorGenerator.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;/html&gt;
</code></pre>

<p>I then have this in my CSS file:</p>

<pre><code>* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#body {
  background: #E1E1F4;
}
</code></pre>

<p>And this on the JS file:</p>

<pre><code>var mySheet = document.styleSheets[0];
var body = document.getElementById("body");

body.onkeydown = function(e){
  if(e.keyCode == 32){
    mySheet.rules[0].style.background = "#ffa500";
  }
};
</code></pre>

<p>But when I press space(<code>e.keyCode == 32</code>) nothing happens, so then I open the developer tools in Chrome and I get this error message:</p>

<p><code>Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules at HTMLBodyElement.body.onkeydown</code></p>

<p>I'm not sure if Chrome just doesn't support it or if I have a failure in my code, eitherway I truly appreciate any help.</p>
