Передать значения getBoundingClientRect элементу - PullRequest
0 голосов
/ 03 сентября 2018

Я пытаюсь дублировать css-значения видео и изображений (x, y, height, weidth) на элементах span. Для этого я использую getBoundingClientRect, но он дублирует только значения первого элемента моих элементов videos / imgs.

var projectEA = document.getElementById("project-ea");
var medias = projectEA.querySelectorAll("video, img");
console.log(medias);

medias.forEach(function(media){

  var getObj = media.getBoundingClientRect();
  console.log(getObj);
  var legends = projectEA.getElementsByClassName("item__legend");
  var legendsArray = [].slice.call(legends);
  
  legendsArray.forEach(function(legend){
      legend.style.top = (getObj.top + getObj.height) + 'px';
      legend.style.left = getObj.left + 'px';
      legend.style.width = getObj.width + 'px';
      legend.style.height = getObj.height + 'px';
  });
  
});
<section id="project-ea" class="project">

    <span class="item__legend">EA13 - Version mobile</span>
    <span class="item__legend">EA13 - Version desktop</span>
    <span class="item__legend">EA13 - Texture</span>
    <span class="item__legend">EA12 - Texture</span>
    <span class="item__legend">EA12 - Version desktop</span>

    <div class="project__video">
      <video width="100%" class="video-js" preload="auto" autoplay loop muted>
          <source
          src="ea-mobile.mp4"
          type="video/mp4">
      </video>
    </div>
    <div class="project__video">
      <video width="100%" class="video-js" preload="auto" autoplay loop muted>
          <source
          src="ea13.mp4"
          type="video/mp4">
      </video>
    </div>
    <div class="project__photo">
      <img src="ea-photo1.jpg" class="half-img-left" alt="Electro Alternativ Texture"/>
      <img src="ea-photo2.jpg" class="half-img-right" alt="Electro Alternativ Texture"/>
    </div>
    <div class="project__video">
      <video width="100%" class="video-js" preload="auto" autoplay loop muted>
          <source
          src="electroalternativ.mp4"
          type="video/mp4">
      </video>
    </div>

</section>

Хотелось бы, чтобы первый элемент span получил первые значения мультимедиа, второй span получил вторые значения мультимедиа и т. Д.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...