Javascript Girl
  1. Javascript Girl
  3. Javascript: Obtenez l'URL d'image de fond de <div>
Intereting Posts
Bokeh: passez vars à CustomJS pour Widgets Codeigniter ajax CSRF problème Nodejs dans sandbox La chaîne AngularJS remplace en HTML Window.opener est nul après redirection Générer un nombre unique dans la plage (0 – X), garder un historique pour éviter les doublons Quelle est la manière la plus sûre de transmettre les arguments du PHP côté serveur vers le côté client JavaScript Déplacez les images rendues sur les diagrammes élevés au redimensionnement Détecter si le client permet la lecture multimédia en ligne pour la vidéo HTML5 Jquery autocomplete déclencheur de char spécial Jquery Fancybox problème de draggable avec Scrollbars Cross Browser Speech Recognition Solution pour utiliser le mot-clé `this` dans les appels ajax dans les méthodes? Combinaison de météoriseurs de la même collection URL de domaine croisé

Javascript: Obtenez l'URL d'image de fond de <div>

Comment puis-je obtenir l'URL d' background-image d'un élément <div> en JavaScript? Par exemple, j'ai ceci: 

 <div style="background-image:url('http://www.example.com/img.png');">...</div>

Comment obtenir l'URL de l' background-image ?

Vous pouvez essayer ceci: 

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

Modifier:

Basé sur @Miguel commentaire ci-dessous, vous pouvez essayer ceci pour IE: – 

 bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

DEMO FIDDLE

Essaye ça: 

 var url = document.getElementById("divID").style.backgroundImage; alert(url.substring(4, url.length-1));

Ou, en utilisant le replace 

 url.replace('url(','').replace(')','');

Juste pour ajouter à cela si quelqu'un d'autre a une idée similaire, vous pouvez également utiliser Regex: 

 var url = backgroundImage.match(/url\(["|']?([^"']*)["|']?\)/)[1];

Cependant, il semble que la solution de @ Praveen fonctionne réellement mieux dans Safari et Firefox, selon jsPerf: http://jsperf.com/match-vs-slice-and-replace

Si vous souhaitez tenir compte des cas où la valeur inclut des guillemets mais ne sait pas s'il s'agit d'un devis double ou unique, vous pouvez: 

 var url = backgroundImage.slice(4, -1).replace(/["|']/g, "");

Tout d'abord, vous devez retourner votre contenu image d'arrière-plan: 

 var img = $('#your_div_id').css('background-image');

Cela renverra l'URL comme suit:

"Url (' http://www.example.com/img.png ')"

Ensuite, vous devez supprimer les parties non recherchées de cette URL: 

 img = img.replace(/(url\(|\)|")/g, '');