div의 배경 이미지 url을 받을 수 있습니까?

div의 배경 이미지 url을 받을 수 있습니까?

버튼이 있습니다. 버튼을 클릭하면 경고를 표시합니다.background-image의 URL#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))

JavaScript 코드:

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

결과:

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

이미 언급했듯이 Blazemoners 솔루션은 인용문을 제거하지 못하고 있습니다(예: Firefox에서 반환됨).RobWs 솔루션은 상당히 복잡하기 때문에 여기에 2센트를 추가합니다.

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

이거 쓰고 있어요.

  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
  }

이에 대한 정규 표현을 사용하는 것은 주로 다음과 같은 이유로 결함이 있다고 생각합니다.

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

url(") 및 "(") 구성 요소는 일정하므로 문자열을 다음과 같이 자릅니다.

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

여기에 다음을 제거할 간단한 정규식이 있습니다.url("그리고.")반환된 문자열로부터.

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

통화 한 번만 사용하여replace(regex 버전): var bgUrl = $('#element-id').css('background-image').replace(/url\(("|')(.+)("|')\)/gi, '$2');

내 2센트.
배경 이미지 속성이 CSS에서 배경 속성에 의해 덮어쓰면 이러한 솔루션은 작동하지 않습니다.
배경 이미지 속성이 설정되어 있고 브라우저에서 보기를 원하지 않고 jQuery에서 어떤 목적으로 값을 가져오면 된다고 가정해 보겠습니다.이런 것들이 있다면,

<div class="myDivWithBackground">
 <p>Lorem Ipsum</p>
</div>
<style>
.myDivWithBackground{
 background-image: URL('url-here.jpg')
}
div.myDivWithBackground{
 background: #fff!important
}
</style>

그리고나서$('div').css('background-image');URL 대신 none을 반환합니다.

배경을 흰색으로 유지하고 jQuery에서 배경 이미지 URL 값을 가져오려면 배경을 다음과 같은 유사 요소로 바꿉니다.

<style>
    .myDivWithBackground{
     background-image: URL('url-here.jpg')
    }
    div.myDivWithBackground:after{
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: #fff;
      top: 0;
      position: absolute;
    }
    div.myDivWithBackground p{
      position: relative;
      z-index: 9999;
    }
</style>

지금이다$('div').css('background-image');대신 URL('url-here.jpg')을 반환하지 않습니다.

언급URL : https://stackoverflow.com/questions/8809876/can-i-get-divs-background-image-url