为何脚本在Firefox正常运行却在Chrome报错？cssRules无法访问

嘿，这个问题我之前踩过坑！核心差异在于Chrome和Firefox对CSS对象模型（CSSOM）的同源安全策略执行力度不一样。

到底为啥Chrome会炸？ #

当你尝试读取document.styleSheets[0].cssRules时，如果你的样式表属于以下情况，Chrome会直接抛出Uncaught DOMException: Cannot access rules：

• 样式表是从别的域名/源加载的（比如第三方CDN、跨域服务器）
• 你用file://协议在本地打开页面（Chrome对本地文件的同源限制特别严格）
• 跨域样式表的服务器没配置正确的CORS权限

而Firefox在这些场景下（尤其是本地文件或者同源样式表）没有做这么严格的拦截，所以能正常读取样式规则。

另外提一句：你代码里直接用cssRules[16]定位规则也太脆了！样式表只要加个新规则，这个索引就失效了，就算解决了跨域问题也容易出bug。

怎么搞定它？ #

给你几个靠谱的解决思路，按优先级排序：

1. 用getComputedStyle读取元素实际样式（最推荐）

完全不用碰样式表规则，直接拿元素渲染后的计算样式，既避开了同源限制，兼容性还好：

// 先拿到timeline元素
const timelineEl = document.getElementById('timeline');
// 获取它实际渲染的样式
const computedStyle = window.getComputedStyle(timelineEl);
// 解析宽度值（如果是百分比的话）
const widthPercent = parseFloat(computedStyle.width);
// 计算最终宽度
const _timelineWidth = (widthPercent / 100) * document.body.clientWidth;

2. 让样式表满足同源要求

• 如果是本地开发，把外部样式表改成内联<style>标签，直接嵌在HTML里，Chrome就会允许访问cssRules了
• 如果是服务器上的样式表，确保它和你的页面同源（同域名、同协议、同端口）；要是必须跨域，得给样式表的服务器响应加个CORS头：

  Access-Control-Allow-Origin: 你的页面域名
  

  （别用*，指定具体域名更安全）

3. 安全地定位样式规则（如果非要用cssRules的话）

别再用固定索引找规则了，遍历样式表找对应的选择器：

const styleSheet = document.styleSheets[0];
let timelineRule = null;
// 遍历所有规则，找到#timeline的那一条
for (const rule of styleSheet.cssRules) {
  if (rule.selectorText === '#timeline') {
    timelineRule = rule;
    break;
  }
}
if (timelineRule) {
  const _timelineWidth = (Number.parseInt(timelineRule.style.width) / 100) * document.body.clientWidth;
}

内容的提问来源于stack exchange，提问作者Kemal Dwiheldy