web-dev-qa-db-ja.com

外部CSSStyleSheetのルールにアクセスできません

単純なカラージェネレータープロジェクトで.cssRulesと.rulesが機能しない理由を理解できません。

外部CSSファイルをリンクする<link>要素があります。

<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";
  }
};

しかし、space（e.keyCode == 32）を押しても何も起こらないため、Chromeで開発者ツールを開くと、このエラーメッセージが表示されます。

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

Chromeがそれをサポートしていないのか、コードに障害があるのか​​どうかはわかりませんが、いずれにせよ、本当に感謝しています。

javascripthtmlcssgoogle-chrome
11
nico.user

Chrome 64では、スタイルシートに新しいCORSルールが適用されます。CSSオブジェクトモデルに依存する機能のローカルテストを行うには、ローカル開発サーバーを使用する必要があります。詳細については、 ChromeのローカルcssファイルからcssRulesにアクセスできません 。

15
Brad Buchanan