Puis-je obtenir l'URL de l'image d'arrière-plan de div?

88

J'ai un bouton dont lorsque je clique dessus, je veux alerter l' background-imageURL #div1.

C'est possible?

— jQuerybeast
source

Est-ce que cela répond à votre question? Obtenir l'URL de la propriété background-image

— Jason C

189

Je préfère généralement .replace()les expressions régulières lorsque cela est possible, car elles sont souvent plus faciles à lire: http://jsfiddle.net/mblase75/z2jKA/2

    $("div").click(function() {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
        alert(bg);
    });

— Blazemonger
source

4

Et si l'URL de l'image d'arrière-plan ressemblait à quelque chose comme url(my%20picture%20Copy$1$.jpg)? Votre remplacement entraîne la variable bg my%20picture%20Copy\(1\.jpg). Il ne supprime pas non plus les citations (par exemple url("the picture.jpg")).

— Benjamin Manns

1

Ensuite, vous devrez soit ajouter du code pour supprimer les %20parenthèses et, soit vous demander si vous en aviez vraiment besoin en premier lieu. Si vous citez un problème, utilisez plutôt la solution de RobW .

— Blazemonger

1

Ne gère pas plusieurs images d'arrière-plan comme une possibilité.

— Marcel

1

@Marcel Easy si vous n'avez que des images; il suffit de diviser la chaîne par des virgules. Plus compliqué si vous avez des éléments comme des dégradés linéaires , car ceux-ci ont également des virgules.

— Blazemonger

1

cela ne fonctionnera pas si l'image de fond est quelque chose comme

background-image:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4)), url("https://mdn.mozillademos.org/files/7693/catfront.png")

— glasspill

52

Oui, c'est possible:

$("#id-of-button").click(function() {
    var bg_url = $('#div1').css('background-image');
    // ^ Either "none" or url("...urlhere..")
    bg_url = /^url\((['"]?)(.*)\1\)$/.exec(bg_url);
    bg_url = bg_url ? bg_url[2] : ""; // If matched, retrieve url, otherwise ""
    alert(bg_url);
});

— Rob W
source

Je veux l'alerter pour ne pas le régler. Alertez ou écrivez le chemin sur console.log

— jQuerybeast

pour écrire sur la console, essayez: console.log ($ ('# div1'). css ('background-image'))

— Mandeep Pasbola

@RobW Merci. Cela imprime l'URL (google.com) au lieu du seul domaine

— jQuerybeast

@jQuerybeast Mon code ne définit pas le CSS. La .cssméthode renvoie la valeur d'une propriété lorsqu'elle est appelée avec un argument.

— Rob W

2

@tim Non, c'est juste plus précis. Imaginez: background-image: url('photo(2012).png');avec votre bout de code, vous obtiendrez "'photo (2012.png')", ce qui est évidemment incorrect.

— Rob W

21

J'ai légèrement amélioré la réponse, qui gère les définitions CSS étendues comme:

background-image: url(http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png), -webkit-linear-gradient(top, rgb(81, 127, 164), rgb(48, 96, 136))

Code JavaScript:

var bg = $("div").css("background-image")
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')

Résultat:

"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"

— Michael Spector
source

cela ne fonctionnera pas si l'image de fond est quelque chose comme background-image: linear-gradient (rgba (0,0,0,0.2), rgba (0,0,0,0.4)), url (" mdn.mozillademos .org / files / 7693 / catfront.png " )

— glasspill

10

Comme mentionné déjà, la solution Blazemongers ne parvient pas à supprimer les guillemets (par exemple retournés par Firefox). Puisque je trouve la solution de Rob Ws plutôt compliquée, ajouter mes 2 cents ici:

$('#div1').click (function(){
  url = $(this).css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
  alert(url);
})

— Alexander Presber
source

6

Je pense que l'utilisation d'une expression régulière pour cela est défectueuse principalement en raison de

La simplicité de la tâche
L'exécution d'une expression régulière est toujours plus intensive en CPU / plus longue que couper une chaîne.

Comme les composants url (" et ") sont constants, coupez votre chaîne comme ceci:

$("#id").click(function() {
     var bg = $(this).css('background-image').trim();
     var res = bg.substring(5, bg.length - 2);
     alert(res);
});

— Middletone
source

Cela semble être une bonne solution. Mais cela ne fonctionne pas dans Safari. Avec cette approche, vous obtenez "ttps: //.....jp" au lieu de "https: //.....jpg" ..

— IndikatorDesign

Je crois que les "s sont facultatifs dans cette syntaxe. url(myimg.jpg)fonctionne bien ici.

— Abraham Murciano Benzadon

5

J'utilise celui-ci

  function getBackgroundImageUrl($element) {
    if (!($element instanceof jQuery)) {
      $element = $($element);
    }

    var imageUrl = $element.css('background-image');
    return imageUrl.replace(/(url\(|\)|'|")/gi, ''); // Strip everything but the url itself
  }

— Berty
source

1

Fonctionne très bien. Merci!

— IndikatorDesign

4

Voici une simple expression régulière qui supprimera le url("et ")de la chaîne retournée.

var css = $("#myElem").css("background-image");
var img = css.replace(/(?:^url\(["']?|["']?\)$)/g, "");

— Abraham Murciano Benzadon
source

1

En utilisant un seul appel à replace(version regex): var bgUrl = $('#element-id').css('background-image').replace(/url$("|')(.+)("|')$/gi, '$2');

— Ogg
source