Wie kann ich mit JavaScript eine Hintergrundbild-URL erhalten?-CSS-Tutorial-php.cn

Wie kann ich mit JavaScript eine Hintergrundbild-URL erhalten?

Susan Sarandon

Freigeben： 2024-12-08 02:51:11

Original

876 Leute haben es durchsucht

How Can I Get a Background Image URL Using JavaScript?

Bestimmen der Hintergrundbild-URL eines Elements mit JavaScript

Beim Bearbeiten von Elementen auf einer Webseite ist es oft notwendig, Informationen über deren Elemente abzurufen Styling, einschließlich ihrer Hintergrundbilder. JavaScript bietet die Möglichkeit, diese Daten zu extrahieren, einschließlich der URL des Hintergrundbilds.

So erhalten Sie die Hintergrundbild-URL eines bestimmten Elements, z. B. eines

Den Stil des Elements abrufen:
- Verwenden Sie document.getElementById() um das Element anhand seiner ID auszuwählen, z. B. var img = document.getElementById('myDiv');.
Zugriff auf berechnetes Styling:
- Verwenden Sie window.getComputedStyle() oder für ältere Browser img.currentStyle, um darauf zuzugreifen der tatsächliche, kaskadierte Stil des Elements.
Extrahieren Sie die URL:
- Isolieren Sie aus dem berechneten Stil die Eigenschaft „backgroundImage“. .
Scheiben und Trimmen:
- Entfernen Sie die führenden URL-Zeichen („und nachgestellten“), die nicht Teil der URL sind.
Unescape-Anführungszeichen:
- Ersetzen Sie bei Bedarf alle maskierten doppelten Anführungszeichen (") mit tatsächlichen doppelten Anführungszeichen (").

Hier ist ein Beispiel-JavaScript-Code zur Implementierung dieses Prozesses:

var img = document.getElementById('your_div_id');
var style = img.currentStyle || window.getComputedStyle(img, false);
var bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

console.log('Background image URL:', bi);

Nach dem Login kopieren

Dieser Code ruft den Hintergrund ab Bild-URL des Elements mit der ID your_div_id und protokolliert es in der Konsole.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript eine Hintergrundbild-URL erhalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!