Как получить свойство background через jquery

475

11 января 2017, 02:55

В браузере google chrome все работает, а firefox ничего не находит, в консоле либо пусто либо null.

$("html,body").on("click", ".k_s_main", function(){ 
  // получение фона 
  var section_bg = $(this).parents(".k_section").css("background"); 
  //var myRe = /url\(\"(.+?)\"\)/ig; 
  //var s_bg = myRe.exec(section_bg); 
  console.log(section_bg); 
})

.k_section { 
  width: 32px; 
  height: 32px; 
  background: url('https://www.gravatar.com/avatar/ed370216aefa86d4246055ccdc9394e5?s=32&d=identicon&r=PG'); 
} 
.k_s_main {width: 32px;height: 32px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="k_section"> 
  <div class="k_s_main"></div> 
</div>

Если конкретней, то нужно получить именно путь к фоновой картинке, а не весь url("... и т.д. но в итоге только в хроме все нормально работает.

Answer 1

Надо использовать background-image, после чего удаляем url и остается путь до картинки:

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

Answer 2

1) Изображение нужно указывать через background-image
2) Получить одну ссылку можно регулярным выражением

$(document).on("click", ".k_s_main", function(){ 
  // получение фона 
  var section_bg = $(this).parents(".k_section").css("background-image").replace(/url\((?:\"|\')?(.+)(?:\"|\')?\)/, '$1'); 
  //var myRe = /url\(\"(.+?)\"\)/ig; 
  //var s_bg = myRe.exec(section_bg); 
  console.log(section_bg); 
})

.k_section { 
  width: 32px; 
  height: 32px; 
  background-image: url('https://www.gravatar.com/avatar/ed370216aefa86d4246055ccdc9394e5?s=32&d=identicon&r=PG'); 
} 
.k_s_main {width: 32px;height: 32px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="k_section"> 
  <div class="k_s_main"></div> 
</div>

Проверил в firefox - всё работает