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

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

Patricia Arquette

Libérer： 2024-12-15 09:23:11

original

382 Les gens l'ont consulté

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, "");

Copier après la connexion

Décomposons-le :

Obtenez le code de l'élément id et son style actuel ou style calculé.
Accédez à la propriété backgroundImage.
Découpez la chaîne pour supprimer les caractères "url(" et ")".
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);

Copier après la connexion

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!

source：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 superposer une couleur sur une image d’arrière-plan en utilisant uniquement CSS ?

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

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2197

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2347

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1965

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...