Maison > interface Web > tutoriel CSS > Comment puis-je obtenir une URL d'image d'arrière-plan à l'aide de JavaScript ?

Comment puis-je obtenir une URL d'image d'arrière-plan à l'aide de JavaScript ?

Susan Sarandon
Libérer: 2024-12-08 02:51:11
original
933 Les gens l'ont consulté

How Can I Get a Background Image URL Using JavaScript?

Détermination de l'URL de l'image d'arrière-plan d'un élément avec JavaScript

Lors de la manipulation d'éléments sur une page Web, il est souvent nécessaire de récupérer des informations sur leur style, y compris leurs images d’arrière-plan. JavaScript offre la possibilité d'extraire ces données, y compris l'URL de l'image d'arrière-plan.

Pour obtenir l'URL de l'image d'arrière-plan d'un élément spécifique, tel qu'un

 :

  1. Récupérer le style de l'élément :

    • Utiliser document.getElementById() pour sélectionner l'élément par son ID, par exemple, var img = document.getElementById('myDiv');.
  2. Accéder au style calculé :

    • Utilisez window.getComputedStyle(), ou pour les versions plus anciennes navigateurs, img.currentStyle, pour accéder au style réel en cascade de l'élément.
  3. Extraire l'URL :

    • De le style calculé, isoler l'image d'arrière-plan propriété.
  4. Slice and Trim :

    • Supprimez les caractères d'URL de début ("et de fin"), qui sont ne fait pas partie de l'URL.
  5. Unescape Citations :

    • Si nécessaire, remplacez les guillemets doubles échappés ("") par de véritables guillemets doubles (").

Voici un exemple de code JavaScript pour implémenter ce processus :

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);
Copier après la connexion

Ce code récupère l'URL de l'image d'arrière-plan de l'élément avec l'ID your_div_id et l'enregistre sur la console.

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