我很难弄清楚为什么.cssRules和.rules在我简单的颜色生成器项目中不起作用。
我有一个<link>元素来链接我的外部CSS文件：

<link href="ColorGenerator.css" type="text/css" rel="stylesheet">

在</html>元素之前添加一个<script>元素来链接我的外部JS文件：

<script src="ColorGenerator.js" type="text/javascript"></script>

然后我在CSS文件中有这个：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#body {
  background: #E1E1F4;
}

在JS文件中：

const mySheet = document.styleSheets[0];
const body = document.getElementById("body");

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

但是当我按下空格（e.keyCode == 32）时，什么也没有发生，所以我打开Chrome中的开发者工具，我得到了这个错误消息：
Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules at HTMLBodyElement.body.onkeydown
我不确定是Chrome不支持它，还是我的代码出错了，无论如何，我真的很感激任何帮助。