Форум

Максим Ученик · #1 (**permalink**) 11.02.2020, 04:49

К примеру, есть несколько img на странице ..
И надо каждый обернуть в div с любым class к примеру class="inset"
Я пробовал но у меня ни чего не выходит
Делал так

<img src="img1.jpg" alt="">
	<img src="img2.jpg" alt="">
	<img src="img3.jpg" alt="">

let images = [...document.querySelectorAll("img")];

for(let i = 0; i<images.length; i++){
  `<div class="inset">${images[i]</div>`;
}

И должно получится вот так на выходе

<div class="inset"><img src="img1.jpg" alt=""></div>
	<div class="inset"><img src="img2.jpg" alt=""></div>
	<div class="inset"><img src="img3.jpg" alt=""></div>

Помогите разобраться.
Вопрос не коммерческий а в качестве обучения

ksa · #2 (**permalink**) 11.02.2020, 07:17

Сообщение от Максим Ученик

надо каждый обернуть в div с любым class к примеру class="inset"

Как вариант...
http://jquery.page2page.ru/index.php...ра ницы

ksa · #3 (**permalink**) 11.02.2020, 07:20

Сообщение от Максим Ученик

`<div class="inset">${images[i]</div>`;

Это волшебное буквосочетание и должно все делать?

Максим Ученик · #4 (**permalink**) 11.02.2020, 07:23

Сообщение от ksa

Это волшебное буквосочетание и должно все делать?

Расслабся я сам справился : https://codepen.io/topicstarter/pen/bGddMeR

рони · #5 (**permalink**) 11.02.2020, 07:57

Сообщение от Максим Ученик

я сам

wrapper.setAttribute('background-size', '100% 100%'); ??? style!!!
и наверно в вашем случае заменить на div лучше сделать, а не обернуть, и раз использовали класс туда стили и пропишите.

рони · #6 (**permalink**) 11.02.2020, 08:14

Максим Ученик,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .inset{
    display: inline-block;
    box-shadow: 0 0 20px 20px #fff inset;
    background-size: 100% 100%;
    will-change: transform;
    transform: scale(0);

 }
 .inset.big{
     animation: big 1s forwards;
     animation-delay: var(--pp, 300ms);
  }
 img{
     visibility: hidden;
 }
 @keyframes big { to { transform: scale(1);  } }
  </style>
<script>
 document.addEventListener( "DOMContentLoaded", function() {
    const replace = (img, i) => {
            const div = document.createElement("div");
            div.className = "inset";
            const opt = {
                backgroundImage: `url(${img.getAttribute("src")})`,
                width: `${img.width}px`,
                height: `${img.height}px`
            }
            Object.assign(div.style, opt);
            div.style.setProperty("--pp", `${i * 800}ms`)
            img.parentNode.replaceChild(div, img);
            div.classList.add("big");
        };
    document.querySelectorAll("img").forEach((img,i) => {
        img.complete ? replace(img, i) : (img.onload = _=> replace(img, i));
    }
    )
});
</script>
</head>
<body>
    <img src="https://razvod.guru/wp-content/uploads/2016/04/elitefon.ru-39315-300x200.jpg" alt="">
    <img src="https://www.cdsblago.ru/images/xcds23033.jpg.pagespeed.ic.iK0165vbVg.jpg" alt="">
    <img src="https://myintelligentkids.com/images/article/2bf7c35c8af068b43130f66b84e2adf68f81de6f.jpeg" alt="">
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript