如何提取包含所有已应用样式的指定页面元素HTML？

要让提取的HTML包含所有生效的CSS样式（包括外部、内部样式），核心思路是把计算后的样式转换为内联样式，这样提取的HTML在邮件等场景中能直接渲染出原表单的样式效果，以下是两种实用方案：

方案一：利用浏览器API手动生成内联样式 #

通过getComputedStyle获取元素最终生效的样式，批量赋值到元素的style属性上，递归处理所有子元素：

function inlineAllStyles(element) {
  const computedStyle = window.getComputedStyle(element);
  // 将计算样式的所有属性转为内联样式
  for (const prop of computedStyle) {
    element.style.setProperty(prop, computedStyle.getPropertyValue(prop));
  }
  // 递归处理子元素
  Array.from(element.children).forEach(child => inlineAllStyles(child));
}

// 定位目标元素
const formWrapper = document.querySelector('.formSubWrapper');
// 给元素及子元素批量添加内联样式
inlineAllStyles(formWrapper);
// 此时提取的outerHTML已包含完整样式
const styledFormHTML = formWrapper.outerHTML;

注：该方法会覆盖元素原有内联样式，若需保留可先备份原style属性，处理后再合并。

方案二：匹配页面CSS规则批量应用 #

遍历页面所有CSS规则，给匹配的元素直接应用规则样式，适合需要保留原内联样式的场景：

function extractStyledHTML(targetSelector) {
  const targetElement = document.querySelector(targetSelector);
  if (!targetElement) return '';

  // 获取页面所有可访问的CSS规则（跳过跨域样式表）
  const allCssRules = Array.from(document.styleSheets).flatMap(sheet => {
    try {
      return Array.from(sheet.cssRules);
    } catch (e) {
      return [];
    }
  });

  // 给元素及子元素匹配并应用CSS规则
  const applyCssRules = (el) => {
    allCssRules.forEach(rule => {
      if (rule instanceof CSSStyleRule && el.matches(rule.selectorText)) {
        Object.assign(el.style, rule.style);
      }
    });
    Array.from(el.children).forEach(applyCssRules);
  };

  applyCssRules(targetElement);
  return targetElement.outerHTML;
}

// 使用示例
const finalFormHTML = extractStyledHTML('.formSubWrapper');

额外适配提示 #

• 邮件客户端对CSS支持有限，尽量避免复杂选择器、Flex/Grid等现代布局，优先用内联样式+表格布局保证兼容性
• 若表单包含图片，需将相对路径转换为绝对路径，否则邮件中无法加载

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