Загрузка...

Изменение background-image через js

Тема в разделе Node.js создана пользователем maksim714 13 июн 2021. 193 просмотра

  1. maksim714
    maksim714 Автор темы 13 июн 2021 0 23 дек 2017
    Добрый день, подскажите как изменить картинку у class="select". Пишу программу на редакторе Atom c библиотеками eclipse.
    Есть div у него нужно поменять картинку нажав на него и пробовал разный код из JS, но он не работает или картинка исчезает.
    Картинку нужно изменить в css с background-image: url(../img/animation_stop.svg'); на background-image: url(../img/animation_play.svg);

    Пробовал как-то так сделать
    Код
    winanim.addEventListener('click', () => {
    if(!wnd.isMaximized()){
    wnd.maximize();
    document.getElementsByClassName("select")[0].style.backgroundImage = "url('../img/animation_stop.svg')";
    } else {
    wnd.unmaximize();
    document.getElementsByClassName("select")[0].setAttribute("background-image","url(../img/animation_play.svg)");
    }
     
  2. asdfowner
    asdfowner 13 июн 2021 8 10 май 2021
    Не знаю зачем ты используешь класс если он относится только к одному элементу. Я бы в таком случае использовал id.
    Самым простым и универсальным решением в твоем случае будет добавлять и удалять класс у элемента.
    Должно получится примерно так:
    JavaScript
    elem = document.getElementsByClassName("select")[0];
    if (...) {
    elem.classList.remove("play");
    } else {
    elem.className += " play";
    }
    Не забудь про пробел когда добавляешь класс через className. Можешь то же сделать и через classList.add("play");
    Естественно в ксс файле добавляешь классы и ссылки на изображения background: url(../img/animation_stop.svg);
    Если все же есть потребность менять напрямую через js, то
    должен работать. Если картинка исчезает то возможно что ты просто не правильно указал путь. Просто зайди в режим отладки в браузере и через стиль элемента попасть на загружаемое изображение.
     
  3. maksim714
    maksim714 Автор темы 13 июн 2021 0 23 дек 2017
    Решил проблему. Ошибка была в том что JS искал файл из под другой директории, помогло указать относительный путь к файлу.
    Код
    document.getElementsByClassName("select")[0].style.backgroundImage = "url('www/html/img/animation_stop.svg')";
     
Загрузка...
Top