recherche

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

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

Patricia Arquette
Patricia Arquetteoriginal
2024-12-15 09:23:11383parcourir

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

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

En JavaScript, il est possible de récupérer l'URL d'une image d'arrière-plan définie sur un élément de manière dynamique. Voici comment procéder :

Q : Comment puis-je obtenir l'URL de l'image d'arrière-plan d'un fichier

élément en JavaScript ? J'ai un élément comme celui-ci :

Comment récupérer l'URL de l'image de fond ?

A : Pour récupérer l'URL de l'image de fond, vous peut utiliser le code suivant :

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

Décomposons-le :

  1. Obtenez le code de l'élément id et son style actuel ou style calculé.
  2. Accédez à la propriété backgroundImage.
  3. Découpez la chaîne pour supprimer les caractères "url(" et ")".
  4. Utilisez remplacer pour se débarrasser des guillemets doubles dans l'URL.

Maintenant, bi contiendra uniquement l'URL de l'arrière-plan image.

Par exemple :

// 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);

Cela affichera l'URL de l'image d'arrière-plan 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!

JavaScript String for break double using Property console this background Access
Déclaration：
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
Article précédent：Comment puis-je modifier les couleurs des puces dans les listes HTML en utilisant uniquement CSS ?Article suivant：Comment puis-je modifier les couleurs des puces dans les listes HTML en utilisant uniquement CSS ?

Articles Liés

Voir plus