从背景图像样式属性传递 url 值

Question

我有下面的 html 代码：

<li class="name1 name2 name3" data-animate-effect="fadeIn" style="background-image: url(images/gallery-1.jpg); ">

那么如何通过 querySelector 将 images/gallery-1.jpg 设置为我的 imageURL 变量 javascript？这是我的尝试和错误：

let imageURL = gallery[newIndex].querySelector("li").style.background.url;

Answer 1

需要更多代码

如果愿意，您可以将 document.querySelector("[data-animate-effect]") 更改为 gallery[newIndex].querySelector("li")

console.log(document.querySelector("[data-animate-effect]")
  .style.backgroundImage.match(/"(.*)"/)[1])

<li class="name1 name2 name3" data-animate-effect="fadeIn" style="background-image: url(images/gallery-1.jpg); ">

Answer 2

尽可能对正则表达式使用 .replace()，因为它通常更易于阅读：

javascript代码

var image = $("li").css("background-image")
image = image.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')

输出：

images/gallery-1.jpg

Answer 3

Select 物品，得到 computed style, and retrieve the background image information. Then extract the URL from that data with a regular expression, and match.

const li = document.querySelector('li');
const style = window.getComputedStyle(li);
const imageUrl = style.getPropertyValue('background-image');
console.log(imageUrl.match(/"(.+)"/)[1]);

<li class="name1 name2 name3" data-animate-effect="fadeIn" style="background-image: url('https://dummyimage.com/100x100/666/ff0'); ">

从背景图像样式属性传递 url 值

Pass url value from background image style property

javascript

html

properties

styles

queryselector

从背景图像样式 属性 传递 url 值

Pass url value from background image style property

javascript

html

properties

styles

queryselector

从背景图像样式属性传递 url 值