JavaScript获取HTML元素outerHTML丢失background-image属性如何解决

问题原因 #

你代码中执行的x.style.background="#ddd"是覆盖了复合CSS属性background，该操作会自动清空同一元素上原本设置的background-image、background-position等所有背景相关的单独属性，因此获取outerHTML时自然看不到background-image属性。

解决方法 #

有两种常用方案可选：

方案1：修改背景色时使用单独属性而非复合属性 #

把修改背景的代码替换为backgroundColor，仅修改背景色不影响其他背景属性：

function myFunction() {
  var x = document.getElementById("form");
  var y = document.getElementById("test");
  var z = document.getElementById("testP");
  // 仅修改背景色，不覆盖其他背景属性
  x.style.backgroundColor = "#ddd";
  y.innerHTML=x.outerHTML;
  z.innerText=x.outerHTML;
}

方案2：修改元素前先缓存原始outerHTML #

如果需要完全保留元素最初的所有属性，可以在修改元素操作之前先把outerHTML存下来：

function myFunction() {
  var x = document.getElementById("form");
  // 先缓存原始完整的outerHTML
  const originalOuterHTML = x.outerHTML;
  var y = document.getElementById("test");
  var z = document.getElementById("testP");
  x.style.background="#ddd";
  // 使用提前缓存的原始内容
  y.innerHTML=originalOuterHTML;
  z.innerText=originalOuterHTML;
}

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