使用jquery从内联css获取后台url

Question

我正在尝试获取背景图像：url('XXX')；

这就是我获取所有内联css的方法

有人能帮我只得到背景图像的url吗。谢谢

null

$('.c-image').click(function() {
  var x = $('.colored').attr('style');
  console.log(x)

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-image">
  <span class="c-background">Outer Span
    <span class="colored" style= "background-size: 100%; background-repeat: no-repeat; background-image: url('0963870.jpg'); ">Inner Span</span>
  </span>
</div>

null

Answer 1

若要获取不带引号的url地址，请使用css()方法和replace()方法。

null

$(".colored").click(function () {
    let cleanUrl = $(this).css("background-image").replace('url("', "").replace('")', "");
    console.log(cleanUrl);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c-image">
    <span class="c-background">
        Outer Span
        <span class="colored" style="background-size: 100%; background-repeat: no-repeat; background-image: url(0963870jpg);">Inner Span</span>
    </span>
</div>