web-dev-qa-db-fra.com

ne peut pas accéder aux règles dans CSSStyleSheet externe

J'ai du mal à comprendre pourquoi .cssRules et .rules ne fonctionnera pas dans mon projet simpliste de générateur de couleurs.

J'ai un <link> élément pour lier mon fichier CSS externe:

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

Et un <script> élément pour lier mon fichier JS externe avant le </html> élément:

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

J'ai ensuite ceci dans mon fichier CSS:

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

#body {
  background: #E1E1F4;
}

Et ceci sur le fichier 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";
  }
};

Mais quand je presse l'espace (e.keyCode == 32) rien ne se passe, alors j’ouvre les outils de développement dans Chrome et j’obtiens le message d’erreur suivant:

Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules at HTMLBodyElement.body.onkeydown

Je ne sais pas si Chrome ne le prend pas en charge ou si mon code échoue, de toute façon j'apprécie vraiment toute aide.

javascripthtmlcssgoogle-chrome
11
nico.user

À compter de Chrome 64, de nouvelles règles CORS sont appliquées pour les feuilles de style. Vous devez utiliser un serveur de développement local pour tester localement les fonctionnalités qui dépendent du modèle d'objet CSS. Pour plus de détails, voir. Impossible d'accéder à cssRules à partir d'un fichier css local sous Chrome .

15
Brad Buchanan