为什么获取div背景不返回背景[重复]答案

【问题标题】：why get div background doesn't return the background [duplicate]为什么获取div背景不返回背景[重复]
【发布时间】：2021-04-09 16:04:45
【问题描述】：

我正在尝试在 Javascript 中获取 div imageBackground。

function addToCartDialog(item) {
  img = item.getElementsByClassName("img")[0].style.backgroundImage;
  console.log(img);
}

.container div.item .img {
  background-image: url("https://burgersbar.co.il/wp-content/uploads/2018/12/המבורגר-פריט.png");
  background-size: cover;
  width: 240px;
  height: 180px;
  margin: 0 auto;
  cursor: pointer;
  display: block;
}

<div class="item" id="burger" onclick="addToCartDialog(this)">
  <div class="img">s</div>
  <div class="itemName">Spicy</div>
  <div class="info">100% meat</div>
  <div class="price">50₪</div>
</div>

页面上的一切看起来都很好，但是当我单击 div 时，我在控制台中得到空行.. 我可以在页面上看到图像

【问题讨论】：

.style 属性仅从标记中获取style 属性中定义的属性（或者如果您手动更改了它们）。为此您需要window.getComputedStyle()

标签： javascript html css

【解决方案1】：

您可以使用 getComputedStyle() 从外部样式表或非内联 CSS 中提取绑定到元素的属性。

function addToCartDialog(item) {
  //Get the propert using computedStyleMap()
  img = item.getElementsByClassName("img")[0].computedStyleMap().get("background-image").toString();
  //Extract the URL using regular expression
  image_url = img.match(/.+?\"(.+?)\".+/)
  console.log(image_url[1]);
}

.container div.item .img {
  background-image: url("https://burgersbar.co.il/wp-content/uploads/2018/12/המבורגר-פריט.png");
  background-size: cover;
  width: 240px;
  height: 180px;
  margin: 0 auto;
  cursor: pointer;
  display: block;
}

<div class="container">
  <div class="item" id="burger" onclick="addToCartDialog(this)">
    <div class="img">s</div>
    <div class="itemName">Spicy</div>
    <div class="info">100% meat</div>
    <div class="price">50₪</div>
  </div>
</div>

PS：我添加了一个.container div 供参考

【讨论】：