You can call me Maxon Ответов: 0

Связать массив значений элемента getboundingclientrect с другим массивом элементов

Привет, ребята ! Я пытаюсь построить систему "легенда", в которой массив элементов span (легенды) будет получать те же значения css (left, top, width, height), что и медиаэлементы, также хранящиеся в массиве. Чтобы получить эти значения, я использую getBoundingClientRect, я могу получить значения media, но я не могу дать эти значения своим элементам span. Вот мой код :

Что я уже пробовал:

var allProjects = document.getElementsByClassName("project");
var projectsArray = [].slice.call(allProjects);

projectsArray.forEach(function(project){

  var medias = project.querySelectorAll("video, img");
  var mediasArray = [].slice.call(medias);
  var legends = project.getElementsByClassName("item__legend");
  var legendsArray = [].slice.call(legends);
  console.log(legendsArray);

  mediasArray.forEach(function(media){
    function getBoundingClientRect(media) {
      const getObj = media.getBoundingClientRect();
      return {
        top: getObj.top,
        right: getObj.right,
        bottom: getObj.bottom,
        left: getObj.left,
        width: getObj.width,
        height: getObj.height,
        x: getObj.x,
        y: getObj.y
      };
    }

    var valuesArray = Object.values(getBoundingClientRect(media));
    console.log(valuesArray);
  });

  // Now I have to connect these arrays in order to set css style of "legends" elements, but I'm really stucked -_-'

});


<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 id="test-position-2" width="100%" class="video-js" preload="auto" autoplay loop muted>
          <source

          src="electroalternativ.mp4"

          type="video/mp4">
      </video>
    </div>

</section>

<section id="project-beaufils" class="project">
    ...
</section>

0 Ответов