Javascript获取元素背景图片，但消除“ url（）”
[英]Javascript get element background image BUT eliminate the “url()”
问题描述
Ive been working on an image gallery ive been creating myself and im adding a "Zoom in" feature to it. 
我一直在开发图片库，但我一直在创造自己，并在其中添加了“放大”功能。
I know im very close to succeeding but i have just one tiny issue. 我知道我非常接近成功，但是我只有一个小问题。 In Javascript i managed to get the background property of the image that will be enlarged but it grabs the image including the url() . 在Javascript中，我设法获取了将被放大的图像的background属性，但它抓取了包括url()的图像。 I want to only get the URL (http:.../) EXCLUDING the url() . 我只想获取不包括url()的URL（http：... / url() 。
I hope this isn't very confusing but if you are, this is the link to my project. 我希望这不是很令人困惑，但是如果您愿意，这是指向我的项目的链接。 Click on the image to Zoom in, but it actually alerts the background-image property because i wanted to see what it fetches first. 单击图像进行放大，但实际上它会警告background-image属性，因为我想先查看它的内容。
Is this possible? 这可能吗？
6 个解决方案
解决方案1
1
UPDATED 更新
You can use a regular expression to take off the url( and the ) like this: 您可以使用正则表达式来url(和)如下所示：
var sourceimg = document.getElementById("image");
var url = window.getComputedStyle(sourceimg, null).getPropertyValue("background-image");
var urlWithoutUrl = url.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
alert(urlWithoutUrl);
:) :)
解决方案2
1 已采纳 2015-03-20 19:58:59
The most simple solution is the slice method. 最简单的解决方案是切片方法。 The first parameter specifies where to start the selection, the second specifies the end the selection from end of string if it's negative. 第一个参数指定从何处开始选择，第二个参数指定从字符串末尾开始的选择的结束（如果为负）。 So, your code should be: 因此，您的代码应为：
var bkImg = window.getComputedStyle(sourceimg,null).getPropertyValue("background-image");
var bkImgUrl = bkImg.slice(4, -1);
解决方案3
1 2015-03-20 19:59:55
It would be better to just take the string inside the url() rather than using regular expressions or other stuff. 最好只将字符串放在url()内，而不要使用正则表达式或其他内容。
var url = "url(somefile.gif)";
var final_url = url.substr(4, url.length - 4 - 1);
Arguments: The initial position (starting from 0 , that means fourth character is "s") and the number of characters that will create the new string (that is, the length of the original string minus 4 -the url( stuff- and minus 1 -the ) stuff-). 参数：初始位置（从0开始，这意味着第四个字符是“ s”）以及将创建新字符串的字符数（即，原始字符串的长度减去4 -url url( stuff-和minus 1-the ) stuff-）。
The result will be: 结果将是：
somefile.gif
Using it in your problem: 在您的问题中使用它：
var url = window.getComputedStyle(sourceimg,null).getPropertyValue("background-image");
var final_url = url.substr(4, url.length - 4 - 1);
alert(final_url);
解决方案4
0 2015-03-20 19:48:30
Use a regular expression, or substring from the position of 使用正则表达式或子字符串的位置
s.IndexOf("(")) + 1;
Thake everything after the "URL(" and then trim the last character to remove the ")". 在“ URL（”）之后加上所有内容，然后修剪最后一个字符以删除“）”。
解决方案5
0 2015-03-20 19:57:24
Try 尝试
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>
解决方案6
0 2015-03-20 19:58:33
这是您需要在代码中进行的更改：
alert(window.getComputedStyle(sourceimg,null).getPropertyValue("background-image").replace(/^url\((http.+)\)$/g, '$1'));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.