如何使用querySelector获取background-image的url值并赋值给JavaScript变量

错误原因 #

• 你使用的style.background.url不是DOM标准支持的属性，background是包含背景图、位置、重复方式等配置的复合属性，要读取内联的背景图路径，需要用style.backgroundImage属性。
• 如果你拿到的gallery[newIndex]本身就是目标li元素，再调用querySelector("li")会查找li的子元素，找不到就返回null，后续调用属性就会报错。

正确实现代码 #

// 1. 确认li元素获取正确，如果gallery[newIndex]本身是li就去掉后面的querySelector
const targetLi = gallery[newIndex].querySelector("li");
// 2. 拿到原始背景图属性值，格式为 `url("images/gallery-1.jpg")` 或者 `url(images/gallery-1.jpg)`
const rawBgImg = targetLi.style.backgroundImage;
// 3. 截取掉外层的url()和可能存在的引号，拿到纯路径
const imageURL = rawBgImg.slice(4, -1).replace(/['"]/g, '');

运行后imageURL就会被赋值为你需要的images/gallery-1.jpg。

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