Ответы пользователя по тегу CSS
  • Как сделать, чтобы при нажатии на блок выполнялась функция, где из этого блока берётся фон и передаётся в другой блок на JS?

    erge
    @erge
    Примус починяю
    1) Поиск в яндекс: галерея слайдер на javascript - множество готовых решений.

    2) в функцию по onclick нужно передать ссылку на сам объект - this
    div onclick='img(this)'


    <html>
    <script>
    function img(el) {
    	el.style.backgroundImage = "url(https://img3.goodfon.ru/original/1920x1080/6/a4/krasivaya-devushka-amber-heard.jpg)"
    }
    </script>
    	<body>
    		<div onclick='img(this)' style='width:100%;height:100%;margin-bottom: 20px; background-image: url(https://vdudvdud.ru/wa-data/public/shop/products/30/00/30/images/296/296.970.jpg);'></div>
    	</body>
    </html>


    3) вот пример галереи БЕЗ обращения по ID и ClassName, но нужно четко представлять себе структуру документа, поэтому с Id и ClassName все же удобнее, по крайней мере находить блок где надо менять фон, потому что такая конструкция
    document.body.children[0].children[0].style.backgroundImage = document.body.children[0].children[1].children[0].style.backgroundImage;

    это , ну ппц....

    вот галлерея:
    <html>
    <style>
    .bigimage {
    	width:100%;
    	height:75%;
    	margin-bottom: 20px;
    	background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    
    .thumbnail {
    	float:left;
    	width:19%;
    	height:20%;
    	border-style: solid;
    	border-width: 1px;
    	border-color: #333390;
    	background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }
    </style>
    <script>
    window.onload = function () {
    	document.body.children[0].children[0].style.backgroundImage = document.body.children[0].children[1].children[0].style.backgroundImage;
    }
    
    function img(el) {
    	el.parentElement.parentElement.children[0].style.backgroundImage = el.style.backgroundImage;
    }
    </script>
    	<body>
    	<div>
    		<div class="bigimage"></div>
    		<div>
    			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://hdqwalls.com/download/willa-holland-5k-2018-tc-1920x1080.jpg)"></div>
    			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://img3.goodfon.ru/original/1920x1080/6/a4/krasivaya-devushka-amber-heard.jpg)"></div>
    			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://img1.goodfon.com/original/1920x1080/3/9f/anastasiya-scheglova-devushka-4354.jpg)"></div>
    			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://img3.goodfon.ru/wallpaper/original/a/86/kira-kristina-naytli-keira.jpg)"></div>
    			<div onclick="img(this)" class="thumbnail" style="background-image:url(https://wallbox.ru/wallpapers/main2/201731/1501485774597edace3af7c6.85452886.jpg)"></div>
    		</div>
    	</div>
    	</body>
    </html>


    PS: смотрите (изучайте) свойства и методы DOM и пр. пр.
    Ответ написан
    4 комментария