Этот пост описывает работу и использование свойства «backgroundImage» стиля HTML DOM.
Как использовать свойство «backgroundImage» стиля HTML DOM в JavaScript?
Стиль HTML DOM» изображение на заднем плане ” используется для настройки HTML-элемента и документа путем добавления фонового изображения со ссылкой на его путь.
Синтаксис (установка свойства backgroundImage)
объект. стиль . изображение на заднем плане '=' 'url('URL')|нет|начальный|наследовать'Приведенный выше синтаксис поддерживает следующие значения свойства backgroundImage:
- URL('URL'): Он указывает местоположение желаемого фонового изображения.
- никто: Он представляет собой значение по умолчанию, т. е. без фонового изображения.
- исходный: Это похоже на значение по умолчанию в браузере.
- наследовать: Он наследует свойство от своего родительского элемента.
Синтаксис (возвращаемый URL-адрес свойства «backgroundImage»)
объект. стиль . изображение на заднем планеЭтот синтаксис возвращает строковое значение, содержащее URL-адрес добавленного фонового изображения.
Давайте воспользуемся описанным выше синтаксисом на практике, чтобы объяснить использование свойства стиля «backgroundImage».
Пример 1. Применение свойства «backgroundImage» стиля для установки фонового изображения
В этом примере применяется стиль « изображение на заднем плане », чтобы установить желаемое фоновое изображение для документа, указав его URL-адрес.
HTML-код
Во-первых, взгляните на указанный HTML-код:
< h2 > Использовать HTML ДОМ Стиль Свойство backgroundImage в JavaScript h2 >
< кнопка при нажатии '=' 'мояФункция()' > Кликните сюда кнопка >
В этом коде:
- “ » добавляет подзаголовок уровня 2.
- “ <кнопка> » создает кнопку с прикрепленным « по щелчку ” событие для выполнения функции ” мояФункция() ” после нажатия кнопки.
JavaScript-код
Далее следуйте приведенному коду JavaScript:
< сценарий >функция myFunc ( ) {
документ. тело . стиль . изображение на заднем плане '=' 'URL('./html&css/image.jpg')' ;
}
сценарий >
В приведенном выше фрагменте кода:
- Функция под названием « мояФункция() ' определено.
- В своем определении « style.backgroundImage ” свойство применяет указанное “ URL-адрес ” на фон всего документа.
Выход
Вывод показывает, что фоновое изображение добавляется ко всему документу при нажатии кнопки.
Пример 2. Применение свойства «backgroundImage» стиля для возврата URL-адреса фонового изображения
“ изображение на заднем плане ” также полезно возвращать URL-адрес фонового изображения. Давайте посмотрим на это практически.
HTML-код
Во-первых, просмотрите написанный HTML-код:
< h2 > Использовать HTML ДОМ Стиль Свойство backgroundImage в JavaScript h2 >< идентификатор div '=' 'myDiv' стиль '=' 'высота: 500 пикселей; ширина: 500 пикселей;
граница: сплошной черный 3 пикселя; background-image:url('./html&css/image.jpg')' > Этот это див див >
< h4 идентификатор '=' 'демо' > h4 >
В приведенном выше блоке кода:
- “ изображение на заднем плане Свойство используется в элементе , который добавляет фоновое изображение, соответствующее заданному URL-адресу.
- “ » создает пустой подзаголовок уровня 4, который отображает возвращаемое значение (URL) добавленного фонового изображения.
JavaScript-код
Теперь перейдите к коду JavaScript:
< сценарий >
пусть изображение '=' документ. получитьэлементбиид ( 'myDiv' ) . стиль . изображение на заднем плане ;
документ. получитьэлементбиид ( 'демо' ) . внутреннийHTML '=' изображение ;
сценарий >В этом блоке кода:
- Объявите переменную « изображение », который использует « документ.getElementById() » для доступа к элементу «» через его идентификатор «myDiv» и применяет фоновое изображение через « изображение на заднем плане ' свойство.
- Затем метод «document.getElementById()» извлекает пустой подзаголовок, используя его идентификатор «demo», чтобы отобразить URL-адрес добавленного фонового изображения.
Выход
Вывод отображает URL-адрес фонового изображения, примененного к элементу «div».
Заключение
JavaScript использует стиль « изображение на заднем плане ” для назначения фонового изображения нужному элементу HTML или возврата его URL-адреса. Он поддерживает четыре значения свойств для установки фонового изображения, включая «исходное», «наследовать», «URL» и «нет». Однако он не поддерживает никаких значений для получения URL-адреса фонового изображения. Этот пост содержит краткое описание использования свойства backgroundImage в стиле HTML DOM в JavaScript.