Question

我正在编写一个Chrome扩展程序，我想用它来使用Chrome的右键单击上下文菜单为用户提供背景图片的网址。

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

一些注意事项：我没有使用我的扩展程序注入jQuery。而且我还想到了这样一种情况，即绝对位于所需背景图像上方的元素会妨碍这种情况。但我现在并不关心这一点。

到目前为止，这是我的代码。只要被点击的元素具有background-image，它就会起作用。没有找到一个，它还没有看到父母。

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>

如何使用JavaScript查找单击元素（或具有背景图像的最近子元素或父元素）的背景图像？

1 个答案: