Wie erhalte ich die Hintergrundbild-URL eines Div-Elements mithilfe von JavaScript?

Hintergrundbild-URL eines Elements mithilfe von JavaScript abrufen

Frage: Wie können Sie die URL des Hintergrunds abrufen? Bild, das einem bestimmten

zugeordnet ist Element mit JavaScript? Nehmen wir zum Beispiel den folgenden HTML-Code:

<div>
<p>Wie würden Sie nur die URL des Hintergrundbilds extrahieren?</p>
<p><strong>Antwort:</strong> Um dies zu erreichen, befolgen Sie diese Schritte:</p>
<ol><li>
<strong>Identifizieren Sie das Element:</strong> Erhalten Sie einen Verweis auf das <div> Element anhand seiner eindeutigen ID mithilfe von document.getElementById('your_div_id').<li>
<strong>Berechneten Stil abrufen:</strong> Verwenden Sie die Eigenschaft currentStyle oder window.getComputedStyle(), um den berechneten Stil des identifizierten Elements abzurufen Element.</li>
<li>
<strong>Hintergrundbild-URL extrahieren:</strong> Greifen Sie aus dem berechneten auf die Eigenschaft „backgroundImage“ zu Stil. Die URL wird normalerweise in Klammern eingeschlossen, daher wird „slice(4, -1)“ verwendet, um unerwünschte Zeichen zu entfernen. Darüber hinaus werden alle doppelten Anführungszeichen innerhalb der URL durch replace(/"/g, "") ersetzt.</li>
<p>Der folgende Codeausschnitt veranschaulicht diesen Ansatz:</p>
<pre class="brush:php;toolbar:false">var img = document.getElementById('your_div_id'),
    style = img.currentStyle || window.getComputedStyle(img, false),
    bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

Durch die Verwendung von Mit dieser Methode können Sie die URL, die mit dem Hintergrundbild eines bestimmten Elements in JavaScript verknüpft ist, effektiv abrufen und verwenden.