Чи можу я отримати URL-адресу фонового зображення div?

88

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

Це можливо?

Це відповідає на ваше запитання? Отримати URL-адресу з властивості background-image

— Джейсон С

188

Зазвичай я віддаю перевагу .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")).

— Benjamin Manns

1

Тоді вам доведеться або додати якийсь код, щоб зняти екран %20і дужки, або запитати себе, чи вони вам справді там потрібні. Якщо ви цитуєте випуск, використовуйте замість цього рішення RobW .

— Blazemonger

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

— скляна таблетка

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 ($ ('# div1'). css ('background-image'))

— Mandeep Pasbola

@RobW Дякую. Це друкує url (google.com) замість просто домену

— jQuerybeast

@jQuerybeast Мій код не встановлює CSS. .cssМетод повертає значення властивості, коли викликається з одним аргументом.

— Роб W

2

@tim Ні, це просто точніше. Уявіть: background-image: url('photo(2012).png');з вашим бітом коду ви отримаєте "'photo (2012.png')", що, очевидно, є неправильним.

— Роб W

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"

— Майкл Спектор
джерело

це не буде працювати, якщо фонове зображення щось на зразок фонового зображення: лінійний градієнт (rgba (0,0,0,0.2), rgba (0,0,0,0.4)), url (" mdn.mozillademos .org / files / 7693 / catfront.png " )

— скляна таблетка

10

Як уже згадувалося, рішення Blazemongers не вдається видалити котирування (наприклад, повертаються Firefox). Оскільки я вважаю рішення Rob 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);
});

— Міддлтон
джерело

Виглядає як хороше рішення. Але це не працює в Safari. При такому підході ви отримуєте "ttps: //.....jp" замість "https: //.....jpg" ..

— IndikatorDesign

Я вважаю, що "s не є обов’язковими в цьому синтаксисі. url(myimg.jpg)тут чудово працює.

— Абрахам Мурчіано Бензадон,

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');

— Огг
джерело