Как заменить фоновое изображение с одного на другое в css javascript?

Question

Егор @ItzIsonn

Type something...

Как заменить фоновое изображение с одного на другое в css javascript?

Мне надо, чтобы одна картинка в background-image заменилась другой. Но когда я пытаюсь через

preview.style.backgroundImage = "url(icons/Icon.png)"; //preview это там, где меняется изображение

у меня остаётся старая картинка и добавляется вниз новая. Как это сделать?

Вопрос задан более года назад
210 просмотров

2 комментария

Подписаться 1 Простой 2 комментария

Решения вопроса 1

3 комментария

Егор @ItzIsonn Автор вопроса

Вот мой пример

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="amount400" tabindex="1" onclick="amount = 800; amountchange()">
                    <h3>400</h3>
                </div>
<div class="preview">
                    <h3 id="rublikspreview">Не выбрано</h3>
                </div>
</body>
</html>

.amount400 {
  width: 200px;
  height: 210px;
  margin-top: -210px;
  margin-left: 320px;
  background-image: url("icons/Icon.png");
  background-repeat: no-repeat;
  background-size: 175px 175px;
  background-position-x: center;
  background-position-y: top;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: #696969;
  box-shadow: 5px 5px 10px 2px #222;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.35s;
}

.rubliks400 h3 {
  font-size: 22px;
  font-family: "Arial Black";
  color: #ffbb00;
}

.preview {
  width: 200px;
  height: 210px;
  margin-left: 75px;
  margin-top: 20px;
  background-image: url("icons/NotSelected.png");
  background-repeat: no-repeat;
  background-size: 175px 175px;
  background-position-x: center;
  background-position-y: top;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: #696969;
  border-radius: 10px;
}

.preview h3 {
  font-size: 22px;
  font-family: "Arial Black";
  color: #f14141;
}

let buy_preview = document.querySelector("#rublikspreview");

function amountchange() {
    buy_preview.style.backgroundImage = "url('icons/Icon.png')";
}

Написано более года назад

Noder SS @noder_ss

Егор, А кому вы указываете фон? Тексту? Не могу разобраться в коде.

Написано более года назад
Егор @ItzIsonn Автор вопроса

Да, спасибо, не заметил. Исправил. Теперь всё работает

Написано более года назад

Пригласить эксперта

Ответы на вопрос 1

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- минуту назад
- 3 просмотра
0

ответов
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- час назад
- 18 просмотров
0

ответов
JavaScript

Средний
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- 6 часов назад
- 61 просмотр
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- 9 часов назад
- 35 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 12 часов назад
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Flex и position: sticky, почему не работает?
- 1 подписчик
- 14 часов назад
- 44 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 15 часов назад
- 32 просмотра
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 15 часов назад
- 21 просмотр
0

ответов
JavaScript

Простой
Как обойти контроль просмотра видео на сайте образовательного ресурса?
- 1 подписчик
- 19 часов назад
- 118 просмотров
3

ответа
JavaScript

Простой
Как добавить класс элементу до нужного по списку?
- 1 подписчик
- 21 час назад
- 53 просмотра
1

ответ
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Переписать Telegram бота на последнюю версию python

20 нояб. 2024, в 13:24

3000 руб./за проект

Срочная доработка скрипта для tg mini apps на python

20 нояб. 2024, в 13:16

1000 руб./за проект

СЕО-анализ и варианты оптимизаций

20 нояб. 2024, в 12:50

5000 руб./за проект

style.backgroundImage

Уже давно есть кастомные свойства.
Их и используйте. Очень удобно.

Answer 1 · 2023-03-07 23:00:28

По примеру Илья Корень все работает корректно:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="bg"></div>
</body>
<style>
    .bg{
        background: url("https://centr-plyazhnogo-voleybolu.netlify.app/photo-header.jpg");
width: 300px;
height: 300px;
background-size: cover;
    }
</style>
<script>
    let preview = document.querySelector(".bg")
    preview.onclick = function(){
        preview.style.backgroundImage = "url('https://centr-plyazhnogo-voleybolu.netlify.app/img11.jpg')"
    }
</script>
</html>

Answer 2 · 2023-03-07 22:11:00

Желательно бы код.
Но сходу скажу, что вам в url нужно также строку передавать, т.е.:

preview.style.backgroundImage = "url('icons/Icon.png')";

Думаю проблема в этом и кроется.

Как заменить фоновое изображение с одного на другое в css javascript?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт