title: cannot access rules in external CSSStyleSheet
body: <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 class="lang-html prettyprint-override"><code>&lt;link href=&quot;ColorGenerator.css&quot; type=&quot;text/css&quot; rel=&quot;stylesheet&quot;&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 class="lang-html prettyprint-override"><code>&lt;script src=&quot;ColorGenerator.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>I then have this in my CSS file:</p>
  <pre class="lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  #body {
    background: #E1E1F4;
  }
  </code></pre>
  <p>And this on the JS file:</p>
  <pre class="lang-js prettyprint-override"><code>const mySheet = document.styleSheets[0];
  const body = document.getElementById(&quot;body&quot;);
  
  body.onkeydown = function(e) {
    if (e.keyCode == 32) {
      mySheet.rules[0].style.background = &quot;#ffa500&quot;;
    }
  };
  </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>