如何從風格屬性

我有htmlDOM像這樣我想抓圖像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"];

請幫我在此先感謝

來源

2016-12-01 Dilip G

你可以給圖片的來源src屬性爲什麼使用它作爲背景？ –

我正在爲客戶端做的，所以我不能改變'DOM'的結構 –

@DilipG我發佈了一個答案，我已經測試它，它的工作原理。只要試一試 – shivgre

你可以這樣做：

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);

來源

2016-12-01 05:22:44 shivgre

它正在工作，但我越來越'''你可以刪除和更新 –

檢查現在更新 – shivgre

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

來源

2016-12-01 05:25:35 Lego

您可以簡單地使用

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的方法來抓住所有的風格元素。

來源

2016-12-01 05:28:07

仍然不是什麼OP要求。您的代碼只返回'「url（」https://example1.com/image/image1.png「）」' – shivgre

@shivgre現在更新。它只需要提取子字符串。 –

與空字符串「」替換不需要文字：

例片段：

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">

來源

2016-12-01 05:36:42

您可以使用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">

來源

2016-12-01 05:46:28

如何從風格屬性

回答

相關問題