使用原生JS提取data属性值添加style并移除该属性的优雅实现

直接用querySelectorAll配合forEach循环就能优雅完成需求，代码逻辑清晰且原生支持，不需要额外依赖：

// 定位所有带目标data属性的slide-bg元素
const slideBgElements = document.querySelectorAll('[data-flickity-bg-lazyload]');

// 逐个处理元素
slideBgElements.forEach(element => {
  // 提取data属性里的图片地址
  const backgroundUrl = element.getAttribute('data-flickity-bg-lazyload');
  
  // 直接设置背景图样式（不会覆盖元素原有其他style）
  element.style.backgroundImage = `url(${backgroundUrl})`;
  
  // 清理原data属性
  element.removeAttribute('data-flickity-bg-lazyload');
});

细节说明 #

• 选择器[data-flickity-bg-lazyload]精准匹配目标元素，避免误操作其他节点
• 使用forEach遍历NodeList是现代浏览器的原生能力，无需额外转成数组（如果要兼容极老浏览器，可以用Array.from(slideBgElements).forEach(...)）
• 直接操作element.style.backgroundImage比用setAttribute('style', ...)更安全，不会覆盖元素原本已有的style属性（比如宽高、定位等）

可选优化 #

如果图片URL包含空格或特殊字符，或者需要统一设置背景图的适配样式，可以补充处理：

slideBgElements.forEach(element => {
  const backgroundUrl = element.getAttribute('data-flickity-bg-lazyload');
  // 对URL进行编码处理，避免特殊字符问题
  const encodedUrl = encodeURIComponent(backgroundUrl);
  element.style.backgroundImage = `url(${encodedUrl})`;
  // 添加背景图适配样式
  element.style.backgroundSize = 'cover';
  element.style.backgroundPosition = 'center';
  element.style.backgroundRepeat = 'no-repeat';
  
  element.removeAttribute('data-flickity-bg-lazyload');
});

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