CSS Background Image mit Javascript auslesen

Question

Ich habe ein Div

<div class="background-div"></div>

und mit CSS setze ich ein Bild als Hintergrund.

.background-div { 
    background-image: url('bild.jpg'); 
} 

 aber wenn ich in Javascript versuche das Bild auszulesen funktioniert das nicht. 

console.log(document.getElementById('background-div').style.backgroundImage);

Answer 1

Du versuchst die Eigenschaft direkt vom DOM Element zu lesen, aber dieses style Objekt gibt nur "inline styles" (direkt im HTML gesetzt) zurück. Da dein Hintergrundbild über eine CSS Klasse gesetzt wird musst du getComputedStyle verwenden, um die tatsächlich berechneten (also angewandten) Styles zu erhalten.

const elem = document.getElementById('background-div');
const style = window.getComputedStyle(elem);
const imageUrl = style.backgroundImage.match(/url\("(.*)"\)/)[1];
console.log(imageUrl);