javascript - 如何使用 JavaScript 找到单击的元素(或最近的具有背景图像的子元素或父元素)的背景图像？

Question

我正在编写一个 Chrome 扩展程序，我想用它通过 Chrome 的右键单击上下文菜单向用户提供背景图像的 URL。

现在我的问题是找到背景图像。如果用户右键单击正确的元素，那么这很容易。 但是，如果他们单击该元素的子元素，那么我必须查看其父元素。处理这个问题最有效的方法是什么？

一些注意事项:我没有在我的扩展中注入(inject) jQuery。我还想到了这样一种情况:绝对位于所需背景图像上方的元素会妨碍。但我现在不关心这个。

这是到目前为止我的代码。只要单击的元素具有背景图像，它就可以工作。找不到的话，它还没有看 parent 。

document.body.addEventListener('contextmenu', function(ev) {

    // get computed style
    var style = window.getComputedStyle(ev.target, false);

    // img src is inside 'url(' + ')' - slice those off
    var src = style.backgroundImage.slice(4, -1);

    console.log(src);

    return false;
}, false);

Answer 1

function getBackgroundImage(el) {
    if (el == null) {
      return null;
    }
    var backgroundImage = window.getComputedStyle(el, false).getPropertyValue("background-image");
    if (backgroundImage !== 'none') {
      return backgroundImage.slice(4, -1);
    } else {
      return getBackgroundImage(el.parentElement);
    }
}

document.body.addEventListener('contextmenu', function(ev) {
    var src = getBackgroundImage(ev.target);
    console.log(src);
}, false);

.grand-child {
  height: 100px;
  width: 100px;
  background: green;
}

.parent {
  background: url('http://google.com');
}

<div class="parent">
  <div class="child">
    <div class="grand-child">
    
    </div>
  </div>
</div>