getComputedStyle返回CSSStyleDeclaration正常，但属性取值异常（Craigslist站点）

问题现象 #

开发浏览器脚本时，仅在craigslist.org/anypost站点出现异常：调用getComputedStyle()返回的CSSStyleDeclaration对象，控制台展开后能看到正确的fontFamily属性值（如"Bitstream Vera Serif", "Times New Roman", serif"），但直接通过elementStyle.fontFamily访问时，结果却为"sans-serif"。同时尝试获取部分元素（如id="titletextonly"的元素）时，发现元素不存在，怀疑脚本运行时DOM尚未完全加载。

可能原因 #

• DOM未完全加载：脚本执行时机过早，目标元素还未被服务器/页面脚本渲染到DOM中，导致获取失败；未渲染完成的元素，其计算样式也未被正确计算。
• 页面样式动态加载/劫持：Craigslist可能使用延迟加载的样式表，或页面脚本修改了CSSStyleDeclaration的属性访问器，导致直接访问属性返回错误值，而控制台展开时是实时计算的结果。
• 样式计算时机差：元素的计算样式在脚本执行后才最终确定，直接访问属性拿到的是初始默认值，控制台展开时触发了重新计算。

解决方案 #

1. 确保脚本在DOM完全加载后执行 #

将脚本逻辑包裹在DOMContentLoaded事件监听中，保证DOM所有元素渲染完成后再执行：

document.addEventListener('DOMContentLoaded', function() {
  var elementBody = document.getElementsByTagName("body");
  var elementBodyAll = document.body.getElementsByTagName("*");
  var elements = []
      .concat(Array.from(elementBody))
      .concat(Array.from(elementBodyAll));

  for (let i = 0; i < elements.length; i++) {
      var element = elements[i];
      var elementStyle = getComputedStyle(element);
      
      // 使用getPropertyValue替代直接访问属性
      console.dir(elementStyle.getPropertyValue('font-family'));
  }
});

2. 用getPropertyValue替代直接属性访问 #

CSSStyleDeclaration的getPropertyValue是标准的属性值获取方式，相比直接访问属性，更不容易被页面脚本劫持，能可靠获取计算后的样式值：

// 替代 elementStyle.fontFamily
elementStyle.getPropertyValue('font-family');

3. 等待样式表加载完成 #

若页面存在延迟加载的样式表，可监听样式表加载状态，确保样式计算完成后再获取：

document.addEventListener('DOMContentLoaded', function() {
  // 等待所有样式表加载完成
  Promise.all(Array.from(document.styleSheets).map(sheet => {
    if (sheet.href) {
      return new Promise(resolve => {
        const link = document.querySelector(`link[href="${sheet.href}"]`);
        if (link) {
          link.onload = resolve;
          link.onerror = resolve; // 加载失败也继续执行
        } else {
          resolve();
        }
      });
    } else {
      return Promise.resolve();
    }
  })).then(() => {
    // 样式全部加载完成后执行逻辑
    var elements = Array.from(document.body.getElementsByTagName("*"));
    elements.unshift(document.body);
    
    elements.forEach(element => {
      const style = getComputedStyle(element);
      console.log(style.getPropertyValue('font-family'));
    });
  });
});

关于元素不存在的问题 #

getElementById("titletextonly")返回不存在的元素，确实是因为脚本执行时该元素还未被添加到DOM中。Craigslist部分页面内容通过AJAX动态加载或延迟渲染，可使用load事件等待所有资源加载完成后再获取：

window.addEventListener('load', function() {
  // load事件触发时，所有动态内容已加载完成
  const titleElement = document.getElementById("titletextonly");
  if (titleElement) {
    const style = getComputedStyle(titleElement);
    console.log(style.getPropertyValue('font-family'));
  }
});

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