JavaScriptを使用して、クリックされた要素（または最も近い子要素または背景要素を持つ親要素）の背景画像を見つけるにはどうすればよいですか？

Question

Chromeの右クリックコンテキストメニューを使用して背景画像のURLをユーザーに提供するために使用するChrome拡張機能を作成しています。

今、私の問題は背景イメージを見つけることです。ユーザーが正しい要素を右クリックすると簡単です。 しかし、もし彼らがその要素の子をクリックすれば、私は両親を見なければならない。これを処理する最も効率的な方法は何ですか？

いくつかの注意事項：私は自分の内線番号をjQueryに挿入していません。そして、私はまた、望ましい背景画像の上に絶対的に配置された要素が途中で入るシナリオを考えました。しかし、私は現時点でそれに心配していません。

ここまでは私のコードです。クリックされた要素の内容がbackground-imageである限り動作します。 1つ見つからないと、まだ両親を見ていない。

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>