divの背景画像のURLを取得できますか?


回答:


188

http://jsfiddle.net/mblase75/z2jKA/2の.replace()方が読みやすいことが多いため、通常は可能な限り正規表現を使用します。

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

4
背景画像のURLが次のような場合はどうなりますurl(my%20picture%20Copy\(1\).jpg)か?置換すると、bg変数はになりますmy%20picture%20Copy\(1\.jpg)。また、引用符を削除しません(例url("the picture.jpg"))。
ベンジャミンマンズ2013

1
次に%20、括弧と括弧をエスケープ解除するコードを追加するか、そもそも本当に必要かどうかを自問する必要があります。問題を引用する場合は、代わりにRobWのソリューションを使用してください
Blazemonger 2013

1
可能性として複数の背景画像を処理しません。
マルセル

1
@Marcel画像があれば簡単です。文字列をカンマで分割するだけです。線形グラデーションのようなものがある場合、それらにもコンマがあるため、より注意が必要です。
Blazemonger 2014

1
背景画像が次のような場合、これは機能しません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 2016

52

はい、それは可能です:

$("#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);
});

設定しないように注意したい。console.logにパスを警告または書き込みます
jQuerybeast 2012年

コンソールに書き込むには:console.log($( '#div1')。css( 'background-image'))
Mandeep Pasbola 2012年

@RobWありがとうございます。ドメインだけでなくurl(google.com)が出力されます
jQuerybeast 2012年

@jQuerybeast私のコードはCSSを設定していません。この.cssメソッドは、1つの引数で呼び出されると、プロパティの値を返します。
ロブW

2
@timいいえ、もっと正確です。想像してみてbackground-image: url('photo(2012).png');ください。少しのコードで「 'photo(2012.png')」が表示されますが、これは明らかに正しくありません。
ロブW

21

次のような拡張CSS定義を処理する回答が少し改善されました。

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

JavaScriptコード:

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

結果:

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

background-imageが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 2016

10

すでに述べたように、Blazemongersソリューションは引用符を削除できません(Firefoxから返されるなど)。Rob Wsのソリューションはかなり複雑だと思うので、ここに2セントを追加します。

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

6

これに正規表現を使用することは、主に次の理由で誤りがあると思います

  • タスクの単純さ
  • 正規表現の実行は、文字列をカットするよりも常にCPUを集中的に使用する/長くなります。

以来URL(「」)コンポーネントがそうのようなあなたの文字列をトリム、一定です。

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

良い解決策のように見えます。しかし、これはSafariでは機能しません。代わりに、このアプローチを使用すると、 "//.....jp ttps"取得"のhttps://.....jpg" ..
IndikatorDesign

"この構文では、sはオプションだと思います。url(myimg.jpg)ここでは問題なく動作します。
Abraham Murciano Benzadon 2017

5

これを使っています

  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
  }

1
正常に動作します。ありがとう!
IndikatorDesign 2017年


1

replace(正規表現バージョン)への1回の呼び出しの使用: var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.