Question

<div style="background: url(http://www.example.com/image.jpg) center center/cover;">

此内嵌背景图像被外部样式表覆盖：

div {
  background-image: none !important;
}

我的问题：使用JavaScript / jQuery，如何获取内联样式中定义但被CSS覆盖的背景图像的URL？

修改：尝试使用.css()将无效，因为它会获得计算出的背景样式，即none

Answer 1

你可以这样做：

function getStyle() {
  styles = $("div").attr("style");
  styles = styles.split(";");
  for (i = 0; i < styles.length; i++) {
    styles[i] = styles[i].replace(new RegExp(/http(.*)\:\/\//), "http$1___//");
    styles[i] = styles[i].split(":");
    styles[i][1] = styles[i][1].replace(/___/g, ":");
    if (styles[i][0].trim().indexOf("background") === 0)
      return styles[i][1].replace(/^(.*)url|[\(\)]/g, '').split(" ", 1)[0];
  }
}

工作代码段

＆＃13;

$(function () {
  alert($("div").css("background-image"));
  alert(getStyle());
});

function getStyle() {
  styles = $("div").attr("style");
  styles = styles.split(";");
  for (i = 0; i < styles.length; i++) {
    styles[i] = styles[i].replace(new RegExp(/http(.*)\:\/\//), "http$1___//");
    styles[i] = styles[i].split(":");
    styles[i][1] = styles[i][1].replace(/___/g, ":");
    if (styles[i][0].trim().indexOf("background") === 0)
      return styles[i][1].replace(/^(.*)url|[\(\)]/g, '').split(" ", 1)[0];
  }
}

＆＃13;

div {
  background-image: none !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div style="background: url(http://www.example.com/image.jpg) center center/cover;">

＆＃13;

注意： $('div').css('background-image');将始终提供none的计算值。

Answer 2

如果您不介意使用Regex：

var match = $('div').attr('style').match(/url\(["|']?(.+)["|']?\)/);
var url = match ? match[1] : 'default.jpg';

说明：

["|']?会允许您有引号。 (.+)将捕获要恢复的网址。

在第二行，我们检查是否有匹配，如果没有，则返回默认网址。

Answer 3

使用jQuery css方法获取DIV的背景图像：

var bg = jQuery('div').css('background-image');

如何获得被CSS覆盖的内联样式！重要的是使用JavaScript

3 个答案: