Не может получить доступ к правилам во внешнем CSSStyleSheet

У меня проблемы с выяснением, почему .cssRules а также .rules не будет работать в моем упрощенном проекте генератора цветов.

у меня есть <link> элемент для ссылки на мой внешний файл CSS:

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

И <script> элемент, чтобы связать мой внешний файл JS перед </html> элемент:

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

Затем у меня есть это в моем файле CSS:

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

#body {
  background: #E1E1F4;
}

И это в файле JS:

var mySheet = document.styleSheets[0];
var 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 просто не поддерживает его или в моем коде произошла ошибка, в любом случае, я действительно ценю любую помощь.

Источник

2 ответа

Решение

Начиная с Chrome 64, для таблиц стилей применяются новые правила CORS. Вам нужно будет использовать локальный сервер разработки для локального тестирования функциональности, которая зависит от объектной модели CSS. Для получения дополнительной информации см. Невозможно получить доступ к cssRules из локального файла CSS в Chrome.

Источник

Я только что столкнулся с той же проблемой. В моем случае можно было использоватьfetch(the.css)Исправить это.

Источник
Другие вопросы по тегам