Chrome本地页面创建CSS规则时出现Cannot access rules错误的解决方法求助

嘿，我太懂你这个困扰了！把页面放服务器上跑的时候，这段添加CSS规则的代码顺得不行，但本地用file://协议打开C盘里的页面就直接报“Cannot access rules”错误，对吧？

这其实是Chrome针对本地文件的安全限制搞的鬼——出于安全考虑，Chrome在处理本地文件时会限制对样式表rules属性的访问，避免恶意本地文件乱搞权限。

给你两个实用的解决办法：

• 方法一：临时关闭Chrome的本地文件安全限制
  先把所有Chrome窗口都关掉，然后在命令行里执行这个命令（Windows系统）：

  chrome.exe --allow-file-access-from-files
  

  这样启动的Chrome就不会限制本地页面访问样式表的rules属性了，你的原代码就能正常跑啦。不过注意这是临时方案，每次要这么启动才行，而且别用这个模式随便打开不明来源的本地文件哦。

• 方法二：换个方式添加CSS规则（更安全）
  绕开直接访问styleSheets.rules的操作，直接给style元素添加文本内容，完全不会触发权限问题，代码示例：

  // 先查找页面里是否已有style元素，没有就创建一个
  let styleElement = document.querySelector('style');
  if (!styleElement) {
      styleElement = document.createElement('style');
      document.head.appendChild(styleElement);
  }
  // 直接往style元素里加CSS规则文本
  styleElement.textContent += `
      .example-class {
          color: #333;
          font-size: 16px;
      }
      /* 这里可以继续加你需要的其他规则 */
  `;
  

  这种方式兼容性也很好，不管是本地还是服务器环境都能正常工作。

备注：内容来源于stack exchange，提问作者Richard