Wie erhalte ich mithilfe von JavaScript eine Hintergrundbild-URL von einem Div-Element?-CSS-Tutorial-php.cn

Wie erhalte ich mithilfe von JavaScript eine Hintergrundbild-URL von einem Div-Element?

Patricia Arquette

Freigeben： 2024-12-15 09:23:11

Original

383 Leute haben es durchsucht

How to Get a Background Image URL from a Div Element Using JavaScript?

So extrahieren Sie die Hintergrundbild-URL eines Elements mit JavaScript

In JavaScript ist es möglich, die URL eines eingestellten Hintergrundbilds abzurufen ein Element dynamisch. So geht's:

F: Wie kann ich die Hintergrundbild-URL eines

erhalten? Element in JavaScript? Ich habe ein Element wie dieses:

Wie rufe ich die URL des Hintergrundbilds ab?

A: Um die URL des Hintergrundbilds abzurufen, müssen Sie kann den folgenden Code verwenden:

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

Nach dem Login kopieren

Lassen Sie es uns aufschlüsseln:

Ermitteln Sie die Elemente id und sein aktueller Stil oder berechneter Stil.
Greifen Sie auf die Eigenschaft „backgroundImage“ zu.
Schneiden Sie die Zeichenfolge auf, um die Zeichen „url(“ und „)“ zu entfernen.
Verwenden Sie Ersetzen um alle doppelten Anführungszeichen in der URL zu entfernen.

Bi enthält jetzt nur noch die URL des Hintergrunds Bild.

Zum Beispiel:

// Get the URL from an element with id "testdiv"
var img = document.getElementById('testdiv');
var style = img.currentStyle || window.getComputedStyle(img, false);
var bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

// Display the URL
console.log('Image URL: ' + bi);

Nach dem Login kopieren

Dadurch wird die URL des Hintergrundbilds an die Konsole ausgegeben.

Das obige ist der detaillierte Inhalt vonWie erhalte ich mithilfe von JavaScript eine Hintergrundbild-URL von einem Div-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle：php.cn

Vorheriger Artikel：Wie kann ich Aufzählungsfarben in HTML-Listen nur mit CSS ändern? Nächster Artikel：Wie kann ich ein Hintergrundbild nur mit CSS mit einer Farbe überlagern?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2201

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2347

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1965

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...