JavaScript报错Cannot read properties of undefined，修改外部CSS样式求助

你遇到的"Cannot read properties of undefined"错误，核心来自两个关键问题：

1. 未匹配到规则时target变量未定义 #

你的代码仅在找到对应选择器规则时才赋值target，如果循环结束后未找到匹配项（比如样式表加载延迟、选择器拼写不一致），target会处于未定义状态，后续访问target.style直接抛出错误。

2. 样式表遍历与访问的潜在漏洞 #

• 使用for in遍历document.styleSheets会遍历到类数组对象的非索引属性，可能导致无效的样式表访问
• 未对找到的样式表及cssRules/rules做有效性校验，若样式表因跨域或加载问题无法访问规则，会导致ruleSearch为undefined

修复后的代码 #

function setStyleRule(type, attrs) {
  const sheetName = "style";
  let stylesheet = null;

  // 遍历样式表，定位目标外部样式表
  Array.from(document.styleSheets).forEach(sheet => {
    if (sheet.href && sheet.href.includes(`${sheetName}.css`)) {
      stylesheet = sheet;
    }
  });

  // 校验样式表及规则的可访问性
  if (!stylesheet) return;
  const ruleSearch = stylesheet.cssRules || stylesheet.rules;
  if (!ruleSearch) return;

  let target = null;
  // 查找匹配的选择器规则
  for (let i = 0; i < ruleSearch.length; i++) {
    const rule = ruleSearch[i];
    if (rule.selectorText === type) {
      target = rule;
      break;
    }
  }

  // 确认找到目标规则后再执行样式修改
  if (target) {
    Object.keys(attrs).forEach(key => {
      target.style[key] = attrs[key];
    });
  }
}

window.onload = function() {
  setStyleRule("body", {
    "background-color": "red"
  });
};

额外注意事项 #

• 样式表加载时机：window.onload虽等待页面资源加载，但仍可能存在样式表规则未就绪的情况，可配合监听link元素的load事件，确保样式表完全加载后再执行修改逻辑
• 跨域限制：若样式表来自不同域名（或本地file://协议），浏览器会限制访问cssRules，此时无法通过该方式修改外部样式表，建议改用内联样式或动态添加样式标签的方式替代

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