Node.js修改元素background-image为多URL值未生效问题排查

问题场景 #

需要将带内联style的div元素的单个背景图修改为两个背景图：
原HTML：

<div id="bg" style="background-image: url('img/img1.png')"></div>

目标HTML：

<div id="bg" style="background-image: url('img/img2.png'), url('img/img3.png')"></div>

使用Node.js+jsdom修改后，生成的文件无变化。

问题原因 #

1. 未加载目标HTML内容：代码中template变量未赋值（未读取原始HTML文件），导致操作的DOM不是目标内容
2. jsdom style属性序列化问题：直接给bg.style.backgroundImage赋值多URL字符串时，jsdom可能无法正确将其序列化为内联style属性

解决方案 #

步骤1：确保读取目标HTML文件 #

先通过fs读取原始HTML内容到template变量，否则操作的是空DOM。

步骤2：使用可靠的方式修改style属性 #

推荐两种方法：

方法1：直接修改style属性字符串

通过getAttribute和setAttribute直接操作内联style的字符串内容，避免jsdom的style对象解析问题：

const fs = require("fs-extra");
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

// 读取原始HTML文件
const template = fs.readFileSync('原始HTML文件路径.html', 'utf8');

const dom = new JSDOM(template, {contentType: "text/html", includeNodeLocations: true})
const backgrounds = dom.window.document.querySelectorAll("*[style]");
    
for (let m = backgrounds.length; m--; ) {
  const bg = backgrounds[m];
  const styleStr = bg.getAttribute('style');
  // 匹配并替换background-image属性
  if (styleStr && styleStr.includes('background-image')) {
    const updatedStyle = styleStr.replace(
      /background-image:\s*url\(['"]?[^'")]+['"]?\)/i,
      "background-image: url('img/img2.png'), url('img/img3.png')"
    );
    bg.setAttribute('style', updatedStyle);
  }
}

// 写入修改后的文件
fs.writeFile('test/check.html', dom.window.document.documentElement.outerHTML, {overwrite: true}, (err) => {
  if (err) console.error('写入文件失败:', err);
});

方法2：使用style.setProperty方法

通过setProperty直接设置CSS属性，比直接赋值backgroundImage更可靠：

// 循环内替换为以下代码
const bg = backgrounds[m];
// 检查元素是否有background-image属性
if (bg.style.backgroundImage) {
  bg.style.setProperty('background-image', "url('img/img2.png'), url('img/img3.png')");
}

说明 #

• 正则表达式/background-image:\s*url\(['"]?[^'")]+['"]?\)/i可以匹配单引号、双引号或无引号的URL格式，确保替换覆盖常见情况
• 如果只需要修改特定id的元素（比如示例中的#bg），可以把选择器改为document.querySelector('#bg')，更高效精准

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