如何用JavaScript保留DOM移动后元素的原有CSS样式？

当把DOM元素移动到<body>的子元素位置后，原父节点的CSS子选择器（比如示例中的.mydiv *）会因为元素脱离原父上下文而失效。在无法重构现有CSS、元素及样式结构未知的前提下，可以通过以下JavaScript方案保留原有样式：

方案1：复制计算后的内联样式 #

直接获取元素在原位置的计算样式，将其转换为内联样式后再移动元素。内联样式不受DOM层级变化影响，能完全保留原视觉效果。

// 获取目标元素
const targetElement = document.querySelector('p');
// 获取元素在原位置的所有计算样式
const computedStyles = window.getComputedStyle(targetElement);

// 将计算样式逐一设置为内联样式
Array.from(computedStyles).forEach(prop => {
  targetElement.style.setProperty(prop, computedStyles.getPropertyValue(prop));
});

// 移动元素到<body>顶部
document.body.prepend(targetElement);

优缺点：

• 优点：实现简单，无需分析CSS规则，能完整保留所有视觉样式
• 缺点：内联样式优先级高于外部CSS，后续针对该元素的外部样式修改可能被覆盖

方案2：动态生成匹配原样式的CSS规则 #

通过分析所有生效的CSS规则，提取目标元素匹配的样式，生成专属类名的CSS规则并注入页面，避免内联样式的优先级问题。

const targetElement = document.querySelector('p');
const styleSheets = Array.from(document.styleSheets);
const matchingRules = [];

// 遍历所有样式表，收集匹配目标元素的CSS规则
styleSheets.forEach(sheet => {
  try {
    Array.from(sheet.cssRules).forEach(rule => {
      if (rule instanceof CSSStyleRule && targetElement.matches(rule.selectorText)) {
        matchingRules.push(rule);
      }
    });
  } catch (e) {
    // 跨域样式表无法访问，直接跳过
  }
});

// 生成唯一类名，避免样式冲突
const uniqueClass = `preserve-origin-style-${Date.now()}`;
targetElement.classList.add(uniqueClass);

// 创建新样式标签，注入提取的样式规则
const styleTag = document.createElement('style');
styleTag.textContent = matchingRules.map(rule => {
  return `.${uniqueClass} { ${rule.style.cssText} }`;
}).join('\n');
document.head.appendChild(styleTag);

// 移动元素到<body>顶部
document.body.prepend(targetElement);

优缺点：

• 优点：样式优先级与原CSS一致，不会干扰后续样式修改
• 缺点：无法访问跨域样式表，部分场景下可能遗漏部分样式规则

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