jquery - 使用 jQuery 获取 css 背景图像(使用 html 属性 'style' 设置)

Question

我有一个 html div，带有 .photoBackground 类和一个 id #photo。 id 是一个，具有所有背景图像选项、高度宽度等。背景图像本身位于 div 属性 style="background-image:url(link.jpg)" 中。这是一个画廊，其中所有 div 都完全相同，除了 1 使用 #photo2，因为我需要稍微不同的设置。无论如何，我需要从 style 属性中获取 url。我该怎么做？

HTML:

        <div id="lightbox_shadow_container">
            <a id="lightbox-shadow"></a>
            <div id="lightboxCancelCross_container">
                <svg class="lightboxCancelCross" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="35px" height="35px" viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
<g>
	<g id="cross">
		<g>
			<polygon points="612,36.004 576.521,0.603 306,270.608 35.478,0.603 0,36.004 270.522,306.011 0,575.997 35.478,611.397 
				306,341.411 576.521,611.397 612,575.997 341.459,306.011 			"/>
		</g>
	</g>
</g>
</svg>
            </div>
            <div id="lightbox_caption_container">
                <a id="lightbox"></a>
                <div class="photoCaptionEffect">
                    <p class="photoCaptionBig" style="               
    "></p>
                </div>
            </div>
        </div>
<div class="photoBackground" id="photo" style="background-image: url(Styling-Content/galleriBilleder/image11.JPG);">

jQuery:

$(document).ready(function() {
    $('.photoBackground').on('click',function () {
        var idIClickedOn = '#' + $(this).attr('id'); //this will give you the actual id of the element
        var image = $(idIClickedOn ).css('background-image');
        // remove "url(" and ")" to get the url
        image = image.replace('url(','').replace(')','');
        $("#lightbox").css('background-image','url(' + image + ')');
        var captionOG = $(this).find('p.photoCaption'); $(".photoCaptionBig").text($(captionOG).text().replace(captionOG, "photoCaptionBig")); 
        $('#lightbox_shadow_container').show();
        $('#lightbox-shadow').show();
        $('#lightbox').show();
    });
    $('#lightbox-shadow').click(function() {
        $('#lightbox').hide();
        $('#lightbox-shadow').hide();
        $('#lightbox_shadow_container').hide();
        $('#lightbox').css("background-color", "");
        
    });
    $(".lightboxCancelCross").click(function(){
        $("#lightbox-shadow").trigger("click");
    });
});

Answer 1

need to get the url from style attribute

尝试使用 .css("backgroundImage") , String.prototype.replace() 和 RegExp /url\( |\)/g

var url = $("div").css("backgroundImage").replace(/url\(|\)/g, "");
console.log(url)

div {
  width:100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div style="background-image:url(http://lorempixel.com/100/100/cats)"></div>

---

如果要求使用 .css("backgroundImage") 的完整值，则不需要 .replace() ；另外可以用 $(this) 代替 var idIClickedOn = '#' + $(this).attr('id')

$(document).ready(function() {
    $('.photoBackground').on('click',function () {
        // var idIClickedOn = '#' + $(this).attr('id'); //this will give you the actual id of the element
        var image = $(this ).css('background-image');
        // remove "url(" and ")" to get the url
        // image = image.replace('url(','').replace(')','');
        $("#lightbox").css('background-image', image).show();
        // var captionOG = $(this).find('p.photoCaption'); $(".photoCaptionBig").text($(captionOG).text().replace(captionOG, "photoCaptionBig")); 
        // $('#lightbox_shadow_container').show();
        // $('#lightbox-shadow').show();
        // $('#lightbox').show();
    });
  /*
    $('#lightbox-shadow').click(function() {
        $('#lightbox').hide();
        $('#lightbox-shadow').hide();
        $('#lightbox_shadow_container').hide();
        $('#lightbox').css("background-color", "");
        
    });
    $(".lightboxCancelCross").click(function(){
        $("#lightbox-shadow").trigger("click");
    });
    */
});

#lightbox {
  display:none;
}

#lightbox, .photoBackground {
  width:100px;
  height:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="photoBackground" id="photo" style="background-image: url(http://lorempixel.com/100/100/cats);"></div>
  <div id="lightbox"></div>