Javascript獲取元素背景圖片，但消除“ url（）”

Question

我一直在開發圖片庫，但我一直在創造自己，並在其中添加了“放大”功能。

我知道我非常接近成功，但是我只有一個小問題。 在Javascript中，我設法獲取了將被放大的圖像的background屬性，但它抓取了包括url()的圖像。 我只想獲取不包括url()的URL（http：... / url() 。

我希望這不是很令人困惑，但是如果您願意，這是指向我的項目的鏈接。 單擊圖像進行放大，但實際上它會警告background-image屬性，因為我想先查看它的內容。

看看這個

這可能嗎？

Answer 1

更新

您可以使用正則表達式來url(和)如下所示：

  var sourceimg = document.getElementById("image");
  var url = window.getComputedStyle(sourceimg, null).getPropertyValue("background-image");
  var urlWithoutUrl = url.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
  alert(urlWithoutUrl);

:)

Answer 2

最簡單的解決方案是切片方法。 第一個參數指定從何處開始選擇，第二個參數指定從字符串末尾開始的選擇的結束（如果為負）。 因此，您的代碼應為：

var bkImg = window.getComputedStyle(sourceimg,null).getPropertyValue("background-image");
var bkImgUrl = bkImg.slice(4, -1);

Answer 3

最好只將字符串放在url()內，而不要使用正則表達式或其他內容。

var url = "url(somefile.gif)";
var final_url = url.substr(4, url.length - 4 - 1);

參數：初始位置（從0開始，這意味着第四個字符是“ s”）以及將創建新字符串的字符數（即，原始字符串的長度減去4 -url url( stuff-和minus 1-the ) stuff-）。

結果將是：

somefile.gif

在您的問題中使用它：

var url = window.getComputedStyle(sourceimg,null).getPropertyValue("background-image");
var final_url = url.substr(4, url.length - 4 - 1);
alert(final_url);

Answer 4

使用正則表達式或子字符串的位置

s.IndexOf("(")) + 1;

在“ URL（”）之后加上所有內容，然后修剪最后一個字符以刪除“）”。

Answer 5

嘗試

var url = $(el).css("backgroundImage").split(/\s|url\(|\)/).filter(Boolean)[0];

 var url = $("body").css("backgroundImage").split(/\\s|url\\(|\\)/).filter(Boolean)[0]; console.log(url);

 body { width:300px; height:200px; background-image: url('http://lorempixel.com/300/200/technics/') }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body></body>

Answer 6

這是您需要在代碼中進行的更改：

alert(window.getComputedStyle(sourceimg,null).getPropertyValue("background-image").replace(/^url\((http.+)\)$/g, '$1'));

Javascript獲取元素背景圖片，但消除“ url（）”

問題描述

6 個解決方案

解決方案1
1

解決方案2
1 已采納 2015-03-20 19:58:59

解決方案3
1 2015-03-20 19:59:55

解決方案4
0 2015-03-20 19:48:30

解決方案5
0 2015-03-20 19:57:24

解決方案6
0 2015-03-20 19:58:33

Javascript獲取元素背景圖片，但消除“ url（）”

問題描述

6 個解決方案

解決方案1 1

解決方案2 1 已采納 2015-03-20 19:58:59

解決方案3 1 2015-03-20 19:59:55

解決方案4 0 2015-03-20 19:48:30

解決方案5 0 2015-03-20 19:57:24

解決方案6 0 2015-03-20 19:58:33

解決方案1
1

解決方案2
1 已采納 2015-03-20 19:58:59

解決方案3
1 2015-03-20 19:59:55

解決方案4
0 2015-03-20 19:48:30

解決方案5
0 2015-03-20 19:57:24

解決方案6
0 2015-03-20 19:58:33