Как получить 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);
Полезные материалы
- MDN background-image – Описание свойства
background-image
. - CSS-Tricks background-image – Руководство по использованию
background-image
. - W3Schools – CSS background-image – Учебный материал по работе с
background-image
. - Stack Overflow – Чтение файла на сервере с помощью JavaScript – Обсуждение извлечения URL фоновых изображений.
- JSFiddle – Площадка для кода – Платформа для тестирования кода на HTML, CSS и JavaScript.
- jQuery API Documentation – .css() – Подробное описание метода
.css()
от создателей jQuery.