Chrome 64后如何获取元素未计算的原始CSS样式属性值？

针对你提到的两个问题——Chrome64之后怎么获取未计算的原始CSS属性值，以及stylesheets.cssRules访问受限的情况，我整理了几个可行的方案：

一、先明确：Chrome64的cssRules限制是什么？ #

其实Chrome64并没有完全禁用document.styleSheets.cssRules，只是对跨域加载的样式表增加了访问限制：如果样式表是从其他域名加载的，直接访问cssRules会抛出安全错误；但同域的样式表（包括内联样式、同域外部样式文件）依然可以正常访问cssRules。

二、获取原始CSS属性值的具体方案 #

方案1：遍历同域样式表的cssRules（最直接） #

如果你的样式表是同域的，直接遍历样式表规则，找到目标选择器对应的属性即可，这个方法能准确拿到原始定义值：

$(function() {
  // 先执行你的修改操作
  $('.a').css('font-size','100px');

  // 遍历所有样式表
  for (const sheet of document.styleSheets) {
    try {
      // 尝试访问cssRules，跨域表会抛错，所以用try-catch包裹
      for (const rule of sheet.cssRules) {
        // 找到目标选择器.a
        if (rule.selectorText && rule.selectorText.trim() === '.a') {
          // 获取原始的font-size值
          const originalFontSize = rule.style.fontSize;
          console.log('原始font-size:', originalFontSize); // 输出 "2vw"
          break;
        }
      }
    } catch (err) {
      console.warn('跳过跨域样式表:', err.message);
    }
  }
});

方案2：解析样式表的原始文本（兼容跨域/复杂场景） #

如果样式表是跨域的，或者你不想依赖cssRules，可以直接获取样式表的原始文本，再解析出目标属性：

针对内联样式表

$(function() {
  $('.a').css('font-size','100px');

  // 找到页面内的<style>标签
  const styleTags = document.querySelectorAll('style');
  styleTags.forEach(tag => {
    const cssText = tag.textContent;
    // 用正则匹配.a的font-size（简单场景够用，复杂场景建议用CSS解析库）
    const match = cssText.match(/\.a\s*\{\s*font-size\s*:\s*([^;]+)\s*;/);
    if (match) {
      console.log('原始font-size:', match[1].trim()); // 输出 "2vw"
    }
  });
});

针对同域外部样式表

如果是同域的外部样式文件，可以用fetch获取文本后解析：

$(function() {
  $('.a').css('font-size','100px');

  for (const sheet of document.styleSheets) {
    // 只处理同域的外部样式表
    if (sheet.href && sheet.href.startsWith(window.location.origin)) {
      fetch(sheet.href)
        .then(res => res.text())
        .then(cssText => {
          const match = cssText.match(/\.a\s*\{\s*font-size\s*:\s*([^;]+)\s*;/);
          if (match) {
            console.log('原始font-size:', match[1].trim());
          }
        });
    }
  }
});

方案3：使用CSS解析库（复杂场景推荐） #

如果你的CSS有嵌套、媒体查询等复杂结构，正则解析容易出错，推荐用专门的CSS解析库（比如CSSOM或PostCSS）来处理。以CSSOM为例：

// 先引入CSSOM（可通过npm安装后引入，或使用本地引入方式）
// 假设已经引入了CSSOM
$(function() {
  $('.a').css('font-size','100px');

  const styleTags = document.querySelectorAll('style');
  styleTags.forEach(tag => {
    const cssText = tag.textContent;
    const stylesheet = CSSOM.parse(cssText);
    // 遍历所有规则
    for (const rule of stylesheet.cssRules) {
      if (rule.selectorText === '.a') {
        console.log('原始font-size:', rule.style.fontSize); // 输出 "2vw"
        break;
      }
    }
  });
});

注意事项 #

• 跨域样式表：由于浏览器的同源策略，跨域样式表的cssRules无法直接访问，也无法通过fetch获取（除非服务器配置了CORS允许），这种情况下如果必须获取，只能让后端帮忙转发样式文件到同域。
• 行内样式 vs 原始样式：我们上面的方案都是从样式表中获取原始定义，和元素的行内样式（通过.css()修改的内容）是完全分离的，所以即使修改了行内样式，也不影响获取原始CSS值。

内容的提问来源于stack exchange，提问作者Mizok.H