Установить фоновое изображение элемента Div с помощью функции в JavaScript
JavaScript2 месяца назад
от Умар Хассан
В процессе создания привлекательных и адаптивных веб-сайтов требуется добавлять изображения в объектную модель документа (DOM) при запуске функций. В конечном итоге это приводит к тому, что пользователь остается на сайте и исследует его, что приводит к увеличению трафика в пользу разработчика. В таких сценариях установка фонового изображения элемента div с помощью функций JavaScript дает дополнительные возможности.
В этой статье объясняются подходы к установке фонового изображения элемента div с помощью функции в JavaScript.
Как установить фоновое изображение элемента Div с помощью функции в JavaScript?
Фоновое изображение элемента div с помощью функции в JavaScript можно установить с помощью следующих подходов:
- Свойство « style.backgroundImage ».
- « setAttribute() » метод.
Подход 1. Установка фонового изображения элемента Div с помощью функции в JavaScript с использованием свойства style.backgroundImage
Свойство « backgroundImage
Синтаксис
object.style.backgroundImage = «url(‘URL’)|back|initial|inherit»
В данном синтаксисе:
- « url » относится к расположению файла изображения.
- « назад » указывает на фоновое изображение.
- « начальный » относится к значению свойства по умолчанию.
- « наследовать » указывает на наследование свойства от его родительского элемента.
Пример
Давайте следовать приведенному ниже примеру:
Это веб-сайт Linuxhint
В приведенном выше фрагменте кода выполните следующие действия:
- Включите элемент « div » с указанным « id » и скорректированными размерами.
- После этого включить заявленный заголовок.
- Также создайте кнопку с прикрепленным событием « onclick », перенаправляющим на функцию divBackground().
Давайте перейдем к части кода JavaScript:
В приведенном выше фрагменте кода:
- Объявите функцию с именем « divBackground() ».
- В своем определении получить доступ к включенному элементу « div » по его « id », используя метод « document.getElementById()
- Наконец, примените свойство « style.backgroundImage » с указанным местоположением изображения как « URL ».
- Это приведет к установке фонового изображения на включенный заголовок и кнопку в « div ».
Вывод
В приведенном выше выводе видно, что фоновое изображение применяется к содержащемуся « заголовок » и « кнопка » в « div ».
Подход 2: установка фонового изображения элемента Div с помощью функции в JavaScript с использованием метода setAttribute()
Метод « setAttribute() » устанавливает новое значение атрибута. Этот метод можно применить для установки атрибута « background image » для таблицы, содержащейся в элементе « div ».
Синтаксис
element.setAttribute(имя, значение)
В приведенном выше синтаксисе:
- « имя » относится к имени атрибута.
- « значение » указывает на значение атрибута.
Пример
Давайте посмотрим на следующие строки кода:
Sr. No | Name< /th> | Город |
|---|---|---|
| 1 | Дэвид | Лос-Анджелес |
В приведенном выше фрагменте кода:
- Включите элемент « div » с указанным « id ».
- Также содержит указанную « таблица » в « div » с указанными значениями « table-header » и « table-data
- На следующем шаге создайте кнопку с прикрепленным событием « onclick », вызывающим функцию backgroundImage().
Перейдем к JavaScript-части кода:
В приведенном выше фрагменте кода выполните следующие шаги:
- Объявите функцию с именем « backgroundImage() ».
- В своем определении получить доступ к элементу « div » по его « id », используя « document.getElementById()» 9Метод 0017».
- После этого примените метод « setAttribute() » с указанным путем к изображению, как обсуждалось, и атрибутом « style » в качестве параметра.
Вывод
Из приведенного выше вывода видно, что фоновое изображение добавляется в таблицу при нажатии кнопки.
Заключение
Свойство « style.backgroundImage » или метод « setAttribute() » можно использовать для установки фонового изображения элемента div с помощью функции в JavaScript. Первый подход может быть реализован для извлечения « div » с помощью пользовательской функции и применить к нему фоновое изображение. Последний метод можно использовать для установки фонового изображения включенной таблицы путем установки ее атрибутов (изображения).
В этом руководстве объясняется, как установить фоновое изображение для div с помощью функции, использующей JavaScript.
Об авторе
Умар Хассан
Посмотреть все сообщения
Как создать фоновое изображение с элементом изображения и блоком Div — General — Forum
Toryn
1
Привет всем,
Поскольку Webflow в настоящее время не оптимизирует фоновые изображения для мобильных устройств, я экспериментирую с созданием фоновых изображений, используя вместо этого элемент Image внутри блока Div.
Тем не менее, я застрял с отзывчивостью и был бы очень признателен за любую помощь, которую кто-либо может предоставить.
Я вставляю блок Div, устанавливаю его Display на «Flex», а для Horizontal Align и Justify — на «Center». Я установил для параметра Position значение «Fixed->Full» с z-индексом -1, чтобы располагаться позади всего остального на странице. Затем я вставляю элемент изображения, выбираю ресурс изображения и устанавливаю высоту размера элемента изображения на 100VH.
Это приводит к тому поведению, которое я хочу на рабочем столе, но как только ширина области просмотра сокращается за пределы исходного соотношения моего изображения 16: 9 (например, на планшете), изображение начинает сжиматься внутрь по горизонтали.
Функциональность, которую я бы хотел, заключается в том, что на меньших экранах просмотра исходные размеры изображения сохраняются, и изображение просто начинает оставаться в центре и обрезать внутрь со всех сторон (так же, как ведут себя фоновые изображения Webflow).
Заранее большое спасибо, и если что-то из того, что я написал, неясно, просто дайте мне знать!
Бест,
Торин
Вот мой сайт только для чтения: https://preview.webflow.com/preview/toryn?utm_medium=preview_link&utm_source=designer&utm_content=toryn&preview=907d354ea78565c7e60b5c6ae9940c7d&pageId=5d24985460878d501f5006e33&mode03preview (Венсан Бидо)
2
Не могли бы вы тоже поэкспериментировать с подгонкой объектов в CSS?
Добавьте этот код в компонент Ambed на странице:
<стиль>
.fit { объект-подгонка: обложка; ширина:100%; высота:100%;}
Теперь добавьте класс .fit к любому изображению как отдельный класс или комбинированный класс.
Затем он будет вести себя как изображение bg, установленное для обложки, но будет изображением, поэтому оно будет оптимизировано Webflow, и вы можете установить для него alt=»».Видно внизу этой страницы:
2 лайка
Торин
3
Спасибо, Винсент, я поэкспериментирую!
Марио1000 (Марио)
вы можете сделать это в стиле, и вы можете использовать прозрачный PNG для фонового изображения.
Шимон (Шимон)