无ID嵌套Vue DOM元素：能否遍历键值对获取子元素background-image？

你完全可以通过访问元素样式属性或遍历键值对的方式拿到目标background-image值，以下是具体实现方案：

1. 定位目标元素 #

由于没有ID，可通过类名组合定位内层的.img-container元素：

const targetElement = document.querySelector('.img-item-wrapper .img-container');

2. 获取background-image值 #

方法1：直接访问（推荐） #

DOM元素的style属性是CSSStyleDeclaration对象，无需手动遍历，直接通过属性名获取：

const bgImage = targetElement.style.backgroundImage;
// 返回格式示例："url("http://mms1.baidu.com/it/u=690465849,3185922056&fm=253&app=138&f=JPEG?w=500&h=667")"

方法2：遍历键值对（按需使用） #

如果确实需要遍历查找，可通过以下方式：

let bgImage = '';
// 遍历style对象的属性索引
for (let i = 0; i < targetElement.style.length; i++) {
  const prop = targetElement.style[i];
  if (prop === 'backgroundImage') {
    bgImage = targetElement.style[prop];
    break;
  }
}

// 或者使用Object.entries遍历键值对
for (const [prop, value] of Object.entries(targetElement.style)) {
  if (prop === 'backgroundImage') {
    bgImage = value;
    break;
  }
}

补充：获取计算后的样式 #

如果目标样式来自CSS类（而非inline style），需使用getComputedStyle获取最终生效的样式：

const computedStyle = window.getComputedStyle(targetElement);
const bgImage = computedStyle.backgroundImage;

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