Как получить встроенный стиль, который был переопределен с помощью CSS важно с помощью JavaScript

Question

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

На этом фоне встроенное изображение получает переопределены внешнюю таблицу стилей:

div { 
    background-image: none !important; 
} 

Мой вопрос: с помощью JavaScript/JQuery, как я могу получить URL-адрес фонового изображения, который был определен в встроенном стиле, но был переопределен CSS?

Edit: Попытки использовать .css() не будет работать, потому что получает вычисленный стиль фона, который none

Answer 1

Если вы не возражаете против использования Regex:

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

Объяснение:

["|']? позволит вам имеют котировки или нет. (.+) будет улавливать URL для восстановления.

Во второй строке мы проверяем соответствие, и если нет, верните URL-адрес по умолчанию.

Answer 2

Вы можете получить это так:

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]; 
    } 
} 

Рабочей Snippet

$(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]; 
 
    } 
 
}

div { 
 
    background-image: none !important; 
 
}

<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;">

Примечание:$('div').css('background-image'); всегда будет давать вычисленное значение none.

Answer 3

использовать метод JQuery CSS, чтобы получить фоновое изображение в DIV в:

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