Могу ли я получить URL-адрес фонового изображения div?

88

У меня есть кнопка, при нажатии на которую я хочу предупредить background-imageURL-адрес #div1.

Является ли это возможным?

Отвечает ли это на ваш вопрос? Получить URL-адрес из свойства background-image

— Джейсон С.

189

По возможности я обычно предпочитаю .replace()регулярные выражения, так как их легче читать: http://jsfiddle.net/mblase75/z2jKA/2

    $("div").click(function() {
        var bg = $(this).css('background-image');
        bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
        alert(bg);
    });

— Blazemonger
источник

4

Что, если URL-адрес фонового изображения похож на url(my%20picture%20Copy$1$.jpg)? Ваша замена приведет к тому, что переменная bg будет my%20picture%20Copy\(1\.jpg). Он также не удаляет кавычки (например url("the picture.jpg")).

— Бенджамин Манн

1

Затем вам придется либо добавить код, чтобы убрать %20скобки и, либо спросить себя, действительно ли они вам там вообще нужны. Если цитируете проблему, используйте вместо нее решение RobW .

— Blazemonger 05

1

Не обрабатывает несколько фоновых изображений как возможность.

— Марсель

1

@Marcel Easy, если у вас есть только изображения; просто разделите строку на запятые. Сложнее, если у вас есть такие вещи, как линейные градиенты , поскольку в них также есть запятые.

— Blazemonger

1

это не сработает, если фоновое изображение выглядит примерно так

background-image:linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.4)), url("https://mdn.mozillademos.org/files/7693/catfront.png")

— glasspill

52

Да, это возможно:

$("#id-of-button").click(function() {
    var bg_url = $('#div1').css('background-image');
    // ^ Either "none" or url("...urlhere..")
    bg_url = /^url\((['"]?)(.*)\1\)$/.exec(bg_url);
    bg_url = bg_url ? bg_url[2] : ""; // If matched, retrieve url, otherwise ""
    alert(bg_url);
});

— Роб В
источник

Я хочу предупредить, чтобы он не устанавливал. Оповещать или записывать путь в console.log

— jQuerybeast

для записи на консоли попробуйте: console.log ($ ('# div1'). css ('background-image'))

— Мандип Пасбола

@RobW Спасибо. Это печатает url (google.com), а не просто домен

— jQuerybeast

@jQuerybeast Мой код не устанавливает CSS. .cssМетод возвращает значение свойства, когда вызывается с одним аргументом.

— Rob W

2

@tim Нет, просто точнее. Представьте: background-image: url('photo(2012).png');с вашим фрагментом кода вы получите «'photo (2012.png')», что явно неверно.

— Роб У

21

Я немного улучшил ответ, который обрабатывает расширенные определения CSS, например:

background-image: url(http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png), -webkit-linear-gradient(top, rgb(81, 127, 164), rgb(48, 96, 136))

Код JavaScript:

var bg = $("div").css("background-image")
bg = bg.replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')

Результат:

"http://d36xtkk24g8jdx.cloudfront.net/bluebar/359de8f/images/shared/noise-1.png"

— Майкл Спектор
источник

это не сработает, если фоновое изображение выглядит как background-image: linear-gradient (rgba (0,0,0,0.2), rgba (0,0,0,0.4)), url (" mdn.mozillademos .org / files / 7693 / catfront.png " )

— glasspill

10

Как уже упоминалось, решение Blazemongers не может удалить кавычки (например, возвращенные Firefox). Поскольку я считаю решение Роба Ws довольно сложным, добавляю сюда свои 2 цента:

$('#div1').click (function(){
  url = $(this).css('background-image').replace(/^url\(['"]?/,'').replace(/['"]?\)$/,'');
  alert(url);
})

— Александр Пресбер
источник

6

Я думаю, что использование регулярного выражения для этого неверно в основном из-за

Простота задачи
Выполнение регулярного выражения всегда требует больше ресурсов процессора / больше времени, чем вырезание строки.

Поскольку компоненты url (" и ") постоянны, обрезайте строку следующим образом:

$("#id").click(function() {
     var bg = $(this).css('background-image').trim();
     var res = bg.substring(5, bg.length - 2);
     alert(res);
});

— Middletone
источник

Похоже, хорошее решение. Но в Safari это не работает. При таком подходе вы получите "ttps: //.....jp" вместо "https: //.....jpg" ..

— IndikatorDesign

Я считаю, что "s в этом синтаксисе необязательны. url(myimg.jpg)здесь отлично работает.

— Abraham Murciano Benzadon

5

Я использую это

  function getBackgroundImageUrl($element) {
    if (!($element instanceof jQuery)) {
      $element = $($element);
    }

    var imageUrl = $element.css('background-image');
    return imageUrl.replace(/(url\(|\)|'|")/gi, ''); // Strip everything but the url itself
  }

— Берти
источник

1

Работает отлично. Благодарность!

— IndikatorDesign

4

Вот простое регулярное выражение, которое удалит url("и ")из возвращаемой строки.

var css = $("#myElem").css("background-image");
var img = css.replace(/(?:^url\(["']?|["']?\)$)/g, "");

— Авраам Мурчиано Бензадон
источник

1

Используя всего один вызов replace(версия с регулярным выражением): var bgUrl = $('#element-id').css('background-image').replace(/url$("|')(.+)("|')$/gi, '$2');

— Ogg
источник