テスト
Google Chromeのバージョン70.0.3538.110で2018/11/22にテスト。
ローカル環境
<html>
<head>
<style>
body {
color: red;
}
</style>
<link rel="stylesheet" href="cssRule.css">
</head>
<body>aaa</body>
</html>
cssRule.css
body{
background: yellow;
}
このHTMLファイルとCSSファイルでテスト。
> document.styleSheets[0].cssRules
CSSRuleList {0: CSSStyleRule, length: 1}
> document.styleSheets[1].cssRules
VM76:1 Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
at <anonymous>:1:25
ローカル環境で外部リンクのcssRulesにアクセスすると例外が出た。
サーバー環境
> document.styleSheets[0].cssRules
CSSRuleList {0: CSSStyleRule, length: 1}
> document.styleSheets[1].cssRules
CSSRuleList {0: CSSStyleRule, length: 1}
サーバーを立ててテストしたら、外部リンクのcssRulesにアクセスできた。
疑問
ローカル環境でHTMLファイルをGoogle Chromeで開いたら背景が黄色になったので、cssRule.cssのbackground: yellowを読んでいる。
しかし、ローカル環境でdocument.styleSheets[1].cssRulesにアクセスできないのは何故？
Cross-Origin Resource Sharing (CORS)ならブラウザの背景を黄色にしたらいかんでしょ。
Firefoxならローカル環境でcssRulesにアクセスできた。