В JavaScript есть веб-страницы, которым нужен привлекательный макет, например темный фон, который обычно лучше подходит для интерфейсов. Точно так же белый фон позволяет читателям сосредоточиться на содержании, поэтому новостные порталы или блоги используют сравнительно светлый фон с темным текстом. В таких случаях JavaScript становится очень удобным для форматирования и улучшения дизайна документов.
В этой статье мы обсудим методы изменения фонового изображения в JavaScript.
Как изменить фоновое изображение в JavaScript?
Чтобы изменить фоновое изображение в JavaScript, можно использовать следующие подходы:
- “ фоновая картинка ” недвижимость на “ ДОМ ».
- “ получитьэлемент по идентификатору() 'метод' и ' фоновая картинка ” недвижимость на “ параграф ».
Пройдитесь по обсуждаемым методам один за другим!
Способ 1: изменить фоновое изображение в JavaScript, используя свойство backgroundImage в DOM.
“ фоновая картинка » настраивает фоновое изображение указанного элемента. Этот метод можно применить, применив свойство backgroundImage и указав фоновое изображение, указав путь к нему в качестве аргумента.
Синтаксис
В приведенном выше синтаксисе « URL-адрес ” относится к пути к изображению.
Посмотрите на следующий пример для демонстрации.
Пример
В этом примере будет добавлена кнопка с указанным значением и « по щелчку ” событие перенаправляется на
функция с именем backgroundImage():
Теперь функция « фоновая картинка() ” будет объявлено и “ document.body.style.backgroundImage ” будет обращаться к фоновому изображению, используя указанный путь к изображению в своем аргументе:
Вывод приведенной выше реализации будет выглядеть следующим образом:
Способ 2: изменить фоновое изображение в JavaScript с помощью метода getElementById() и свойства backgroundImage в абзаце
“ получитьэлемент по идентификатору() » возвращает элемент с указанным значением и « фоновая картинка », как указано выше, возвращает фоновое изображение конкретного элемента, указанного в его аргументе. Этот метод можно применять для сопоставления указанного цвета с фоном определенного абзаца.
Синтаксис
Здесь, ' элементы ” относится к идентификатору элемента.
Просмотрите следующий пример, чтобы лучше понять изложенную концепцию.
Пример
Во-первых, включите абзац в тег
и назначьте ему определенный идентификатор:
Затем создайте кнопку с событием onclick, обращающимся к функции backgroundImage(), как обсуждалось в предыдущем методе:
Наконец, объявите функцию с именем « фоновая картинка() ' по аналогии. Здесь получите доступ к определенному идентификатору, используя « получитьэлемент по идентификатору() ” и примените к нему указанное фоновое изображение. Это приведет к реализации цвета на фоне абзаца:
Выход
Мы собрали самый простой способ изменить фоновое изображение в Javascript.
Вывод
Чтобы изменить фоновое изображение в Javascript, примените « фоновая картинка ” недвижимость на “ ДОМ ' для применения указанного фонового изображения ко всей веб-странице с помощью функции или путем получения определенного идентификатора с помощью ' получитьэлемент по идентификатору() ” метод и применение ” фоновая картинка ” недвижимость на указанном “ параграф ». Этот блог иллюстрирует методы изменения фоновых изображений в JavaScript.