Maison > interface Web > tutoriel CSS > Comment obtenir l'URL de l'image d'arrière-plan d'un élément Div à l'aide de JavaScript ?

Comment obtenir l'URL de l'image d'arrière-plan d'un élément Div à l'aide de JavaScript ?

Barbara Streisand
Libérer: 2024-12-09 17:23:11
original
835 Les gens l'ont consulté

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

Obtenir l'URL de l'image d'arrière-plan d'un élément à l'aide de JavaScript

Question : Comment récupérer l'URL de l'arrière-plan image attribuée à un <div> élément utilisant JavaScript ? Par exemple, étant donné le code HTML suivant :

<div>
Copier après la connexion

Comment extrayez-vous uniquement l'URL de l'image d'arrière-plan ?

Réponse : Pour ce faire, suivez ces étapes :

  1. Identifier l'élément : Obtenir une référence au <div> élément par son ID unique à l'aide de document.getElementById('your_div_id').
  2. Récupérez le style calculé : Utilisez la propriété currentStyle ou window.getComputedStyle() pour récupérer le style calculé de l'élément identifié element.
  3. Extraire l'URL de l'image d'arrière-plan : Accédez à la propriété backgroundImage à partir du fichier calculé. style. L'URL est généralement placée entre parenthèses, donc slice(4, -1) est utilisé pour supprimer les caractères indésirables. De plus, tous les guillemets doubles dans l'URL sont remplacés à l'aide de replace(/"/g, "").

L'extrait de code suivant illustre cette approche :

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

En employant Cette méthode, vous pouvez récupérer et utiliser efficacement l'URL associée à l'image d'arrière-plan d'un élément spécifique en JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal