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

Question

Егор @ItzIsonn

Type something...

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

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

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

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

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

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

Простой
Почему не срабатывает prototype reverse на строке?
- 1 подписчик
- 9 часов назад
- 34 просмотра
1

ответ
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 1 подписчик
- 10 часов назад
- 50 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- 11 часов назад
- 16 просмотров
0

ответов
JavaScript

Средний
Как сделать, чтобы встроенный обработчик события убрал сам себя?
- 3 подписчика
- 14 часов назад
- 326 просмотров
0

ответов
CSS

Простой
Как сделать плавную анимацию изображения при наведении/убирании курсора мыши?
- 1 подписчик
- 15 часов назад
- 89 просмотров
2

ответа
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- 17 часов назад
- 75 просмотров
0

ответов
CSS

Простой
Как сделать, чтобы блоки занимали половину доступной ширины, а последний нечётный — всю?
- 1 подписчик
- 19 часов назад
- 107 просмотров
4

ответа
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 77 просмотров
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- вчера
- 71 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как совместить JS и Django?
- 1 подписчик
- вчера
- 89 просмотров
1

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Разработать нейросеть

02 мая 2024, в 06:11

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

Автоматизация отчетности сектора подбора и развития персонала в 1С

02 мая 2024, в 05:49

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

Изменение темы сайта на ghost cms

02 мая 2024, в 04:47

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?

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

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

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