web-dev-qa-db-ja.com

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

ボタンをクリックしたときに、#div1の背景画像URLに警告したいボタンがあります。

出来ますか？

jqueryurlhtmlbackground-image
83
jQuerybeast

私は通常、可能であれば正規表現よりも.replace()を好みます。読みやすいことが多いためです。 http://jsfiddle.net/mblase75/z2jKA/2

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

はい、可能です：

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

次のような拡張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"
19
Michael Spector

既に述べたように、Blazemongersソリューションは引用符の削除に失敗しています（Firefoxから返されるなど）。 Rob Wsのソリューションはかなり複雑であるため、ここに2セントを追加します。

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

これに正規表現を使用することは、主に

  • タスクのシンプルさ
  • 正規表現の実行は、文字列を切り取るよりも常にCPUを集中的に使用します。

rl（ "および"）コンポーネントは定数であるため、次のように文字列をトリミングします。

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

返される文字列からurl("と")を削除する単純な正規表現を次に示します。

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

私はこれを使用しています

  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
  }
4
Berty

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

1
Ogg