div의 배경 이미지 URL을 얻을 수 있습니까?

나는 그것을 클릭하면 background-imageURL 을 알리고 싶은 버튼 이 있습니다.#div1 있습니다.

가능합니까?

보통 .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);
    });

예, 가능합니다.

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

다음과 같은 확장 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))

자바 스크립트 코드 :

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

결과:

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

이미 언급했듯이 Blazemongers 솔루션은 따옴표를 제거하지 못합니다 (예 : Firefox에서 반환 됨). Rob Ws 솔루션이 다소 복잡하다는 것을 알았으므로 여기에 2 센트를 추가합니다.

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

나는 이것을 위해 정규 표현식을 사용하는 것이 주로 결함이 있다고 생각합니다.

• 작업의 단순성
• 정규식을 실행하는 것은 항상 문자열을 자르는 것보다 CPU 집약적이거나 더 길다.

때문에 ( "URL 과 ") 구성 요소가 일정하므로처럼 문자열을 잘라 :

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

나는 이것을 사용하고있다

  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
  }

여기를 제거하는 간단한 정규식입니다 url("및 ")반환 된 문자열에서이.

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

replace(정규 버전)에 대한 한 번의 호출 사용 : var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');