Javascript获取元素背景图像，但消除了“;url(）”;

Javascript get element background image BUT eliminate the "url()"

本文关键字：url 元素 获取 背景 图像 Javascript      更新时间：2023-09-26

我一直在开发一个图像库，我一直在创建自己的图像库，并在其中添加了"放大"功能。

我知道我离成功很近，但我只有一个小问题。在Javascript中，我设法获得了将被放大的图像的背景属性，但它捕获了包括url()的图像。我只想获得排除url()的URL（http://）。

我希望这不是很混乱，但如果你是，这是链接到我的项目。单击图像放大，但它实际上会提醒background-image属性，因为我想先看看它获取了什么。

看看

这可能吗？

最简单的解决方案是切片方法。第一个参数指定从哪里开始选择，第二个参数指定在字符串结尾处结束选择（如果为负数）。所以，你的代码应该是：

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

最好只在url()中使用字符串，而不是使用正则表达式或其他东西。

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

参数：初始位置（从0开始，意味着第四个字符是"s"）和将创建新字符串的字符数（即，原始字符串的长度减去4-url(内容-和减去1-)内容-）。

结果将是：

somefile.gif

在你的问题中使用它：

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

更新的

您可以使用正则表达式来去掉url(和)，如下所示：

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

：）

使用正则表达式或位置的子字符串

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

Thake在"URL（"之后的所有字符，然后修剪最后一个字符以删除"）"。

以下是您需要在代码中进行的更改：

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

尝试

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>

相关文章：