如何从风格属性

我有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

如何从风格属性

回答

相关问题