如何從style屬性獲取圖像URL

Question

我有像這樣的html DOM我想抓住圖片url 。

 <img src="constant/spacer.gif" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb">

    <img src="constant/spacer.gif" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">

我的預期輸出： ["https://example1.com/image/image1.png","https://example1.com/image/image1.png"];

現在我正在使用此代碼

 arr = []; $('.images-thumb').each(function(){ arr.push($(this).attr('style')); // furthur i don't know }); console.log(arr); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <img src="" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb"> <img src="" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb"> 

Furthur我不知道如何抓住

["https://example1.com/image/image1.png","https://example1.com/image/image1.png"];

請提前幫助我

Answer 1

你可以這樣做：

url = url.replace(/^url\\(["']?/, '').replace(/["']?\\)$/, ''); 這將從末尾刪除url('和url("從字符串的開頭開始，如果它存在，並且") resp。 ') 。

arr = [];

$('.images-thumb').each(function(){

   var $style = $(this).attr('style');
   var $url = $style.replace(/^background-image:url\(["']?/, '').replace(/["']?\)$/, '').replace(/\)/, '');
   arr.push($url); // further know you know :-P
});

console.log(arr);

Answer 2

你可以簡單地使用

var images = document.querySelectorAll('.images-thumb');
  var image, arr=[];
  for(var i=0; i<images.length;i++){
    image = window.getComputedStyle(images[i]).backgroundImage;
    arr.push(image.substr(5, image.length-7));
  }
console.log(arr);

純JS方法可以獲取元素的所有樣式。

Answer 3

用空字符串“”替換不需要的文本：

示例代碼段：

 arr = []; $('.images-thumb').each(function() { arr.push($(this).css("background-image").replace("url(\\"", "").replace("\\")", "")); }); console.log(arr); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <img src="" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb"> <img src="" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb"> 

Answer 4

    You can give the image path in src attribute, otherwise the script will be like below

  arr = [];

$('.images-thumb').each(function(){
  var txt = $(this).attr('style');
  first = txt.indexOf('(');
    second = txt.indexOf(')');
    arr.push(txt.substr(first+1,second-first-1));
});
console.log(arr);
Just check once

Answer 5

您可以使用JQuery css("background-image")選擇器和正則表達式來獲得所需的結果。

 arr = []; $('.images-thumb').each(function(){ arr.push($(this).css("background-image").replace(/.*\\s?url\\([\\'\\"]?/, '').replace(/[\\'\\"]?\\).*/, '')); }); console.log(arr); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <img src="" style="background-image:url(https://example1.com/image/image1.png);" class="images-thumb"> <img src="" style="background-image:url(https://example2.com/image/image1.png);" class="images-thumb">