Задать вопрос
@BershadskyBogdan
javascript

Java Script + HTML — как повторить действие на странице?

Доброй ночи. Помогите, пожалуйста.

Есть мною написаный кусок кода, который берет из img src ссылку и вставляет в стили div'a background-image.
После чего удаляет изображение.

Мне нужно, чтобы это все происходило со всеми элементами на странице, к которым это относится. Но сейчас пока работает только с первым изображением. Как мне переписать код?
Я не знаю JS, это моя первая попытка, потому что очень нужно реализовать данный метод.

вот код:

var imagelink = document.getElementById("bg-image-link").src;
	
	var imagelinkadd = document.getElementById("bg-image"); 
	
		document.getElementById("bg-image").style.background = "url('"+imagelink+"') no-repeat fixed ";
		document.getElementById("bg-image").style.backgroundSize = "cover";
		
	var imagelinkremove = document.getElementById("bg-image-link").remove();


вот html:

<div id="bg-image" class="slides-fullscreen-img overlay-black"> </div><img id="bg-image-link" src="images/bg-pattern-services.png">
  • Вопрос задан
  • 3403 просмотра
2 комментария
Подписаться 4 Оценить 2 комментария
Решения вопроса 1
shaks
@shaks
как-то так.
Яваскрипт должен быть или под всеми тэгами с которыми он будет работать, или же должен вызываться по событию загрузки страницы.
<html>
<body>

<img class="bg-image" src="http://s.pikabu.ru/images/logo2013.png" width="155" height="52">
<img class="bg-image" src="http://s.pikabu.ru/images/logo2013.png" width="155" height="52">
<img class="bg-image" src="http://s.pikabu.ru/images/logo2013.png" width="155" height="52">

<script>

    imgs = document.getElementsByClassName('bg-image'); // получаем массив <img'ов

    if(imgs.length>0)
    {
        for(var i=imgs.length-1; i >= 0 ; i--)  // в цикле идем задом наперед, чтоб корректно срабатывало удаление элемента
        {
            var div_img = document.createElement('div') // создаем новый DOM  элемент (div)
            div_img.className='slides-fullscreen-img overlay-black' // даем нужные классы
            div_img.style.background= "url('"+imgs[i].src+"')"; // прописываем нужные стили
            div_img.style.backgroundSize= "cover";
            div_img.style.width= imgs[i].width+"px ";
            div_img.style.height= imgs[i].height+"px ";
            document.body.appendChild(div_img); // подсовываем созданный <div> внутрь body
            document.body.removeChild(imgs[i]) // удаляем картинку
        }
    }
</script>

</body>
</html>
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@BershadskyBogdan Автор вопроса
Спасибо огромное! но есть пару моментов, могли бы Вы еще немного помочь. Сейчас работает только тогда когда после трех картинок стоит скрпит, а как сделать так что бы просто все эти элементы заменялись на странице, а скрипт подключался снизу в html?
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сортировка товаров в каталоге на Битрикс
18 дек. 2024, в 16:42
2000 руб./за проект
Разработка ПК игры
18 дек. 2024, в 16:33
2000 руб./в час
Внести изменения на сайт Битрикс
18 дек. 2024, в 16:06
5000 руб./за проект
Ещё заказы