Как получить URL фонового изображения div в JavaScript

Быстрый ответ

Чтобы получить URL фонового изображения div, используйте следующий код:

let bgUrl = getComputedStyle(document.getElementById('divId')).backgroundImage.slice(5, -2);

Этот скрипт позволяет извлечь только URL, исключая заранее лишнюю часть свойства backgroundImage.

Ускорение рабочего процесса при помощи jQuery

Если желаете упростить задачу, включите в код jQuery:

let bgUrl = $('#divId').css('background-image').replace(/url\((['"]?)(.*?)\1\)/g, '$2');

Функция .css() позволяет извлекать окончательное значение свойства, а .replace() отсекает все лишнее, оставляя исключительно необходимый URL.

Учёт ситуаций с 'none' и различными форматами URL

Код высокого качества всегда учитывает возможные сценарии:

• Отсутствие фонового изображения: в случае, если свойство backgroundImage содержит значение 'none', можно предусмотреть возврат альтернативного значения:

  JS

  Скопировать код

  let computedStyle = getComputedStyle(document.getElementById('divId')).backgroundImage;
  let bgUrl = computedStyle !== 'none' ? computedStyle.slice(5, -2) : 'Фоновое изображение не обнаружено';

  Запустить код

• Разнообразие форматов URL: будьте готовы к тому, что URLы фоновых изображений могут встречаться в различных форматах, что требует их дополнительной нормализации.

Совет по оптимизации: сокращайте использование регулярных выражений

В ряде простых задач нет необходимости использовать регулярные выражения, которые могут значительно снижать производительность. Вместо этого предпочтительно использовать .slice(5, -2).

Визуализация

Используйте воображение и представьте процесс извлечения URL как настоящий квест:

• HTML (Стена): базовый элемент с div внутри – 🧱
• CSS (Рамка): внешний вид, здесь находится необходимая нам информация – 🖼️
• URL фонового изображения (Скрытое послание): эта самая искомая информация – 📄

<div id="cloak" style="background-image: url('secret-message.jpg');"></div> // 🖼️🔍📄

Используя код, мы можем раскрывать скрытые сообщения:

Секретное послание: "secret-message.jpg"

Задача выполнена: мы раскрыли секретный URL!

Расширенное применение этого метода

Временные стили? Это не преграда

Указанный код работает не только с временными стилями div. Как же быть со стилями, которые находятся во внешних CSS-файлах или в блоках <style>?

Подробнее об этом расскажет наш спикер на видео

Что с конечными стилями? Всегда готовы

let elStyle = getComputedStyle(document.querySelector('.your-class-name'));
let bgUrl = elStyle.backgroundImage.slice(5, -2);

При работе с невстроенными стилями обязательно следите за корректностью селектора.

Больше фонов, чем предполагалось?

Если у вас в div существуют множественные фоны, воспользуйтесь следующим подходом:

function extractBackgroundImages(backgroundImage) {
  return backgroundImage.split(/),\s*/).map(url => url.slice(5, -2));
}

let bgImages = getComputedStyle(document.getElementById('divId')).backgroundImage;
let urls = extractBackgroundImages(bgImages);

Полезные материалы

1. MDN background-image – Описание свойства background-image.
2. CSS-Tricks background-image – Руководство по использованию background-image.
3. W3Schools – CSS background-image – Учебный материал по работе с background-image.
4. Stack Overflow – Чтение файла на сервере с помощью JavaScript – Обсуждение извлечения URL фоновых изображений.
5. JSFiddle – Площадка для кода – Платформа для тестирования кода на HTML, CSS и JavaScript.
6. jQuery API Documentation – .css() – Подробное описание метода .css() от создателей jQuery.