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

Question

I'm writing a Chrome extension that I want to use to provide the user with the URL of a background image using Chrome's right-click context menu.

Right now my problem is finding the background image. If a user right-clicks the correct element then it's easy. But if they click a child of that element then I have to look at the parents. What's the most efficient way to handle this?

Some notes: I'm not injecting jQuery with my extension. And I've also thought of the scenario where an element that is absolutely positioned above the desired background image would get in the way. But I'm not concerned with that at the moment.

Here is my code so far. It works as long as the clicked element has a background-image . Failing to find one, it does not look at the parents yet.

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>