获取元素的最高位置值，然后在JS中为其添加一个百分比

Question

我正在尝试创建一个将Array元素的“ top”值添加50％的函数。到目前为止，我只设法获取了位置，但是以像素为单位，我不确定如何向这些值添加“ 50％”。我还认为必须有一种更简单的方法来实现这一目标？

const aboutTags = Array.from(document.querySelectorAll(".about-tag"));

document.querySelector(".about-personal-container").addEventListener("mouseover", function() {

  const filteredTags = aboutTags.filter(tag => tag.classList.contains("personal-tag"))

  const getTagPosition = filteredTags.map(tags => tags.style.top = tagPosition = window.getComputedStyle(tags).getPropertyValue('top'));

  console.log(getTagPosition)
  //This gives the element top position but in pixels
});

#about-section {
  background: black;
  height: 100vh;
  position: relative;
  color: white;
}

.personal-tag {
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 10px;
  transition: all 1s;
}

.personal-tag1 {
  top: 5%;
  left: 15%;
}

.personal-tag2 {
  top: 15%;
  left: 35%
}

.personal-tag3 {
  top: 25%;
  left: 65%
}

#about-inner-grid-wrap {
  border: 1px solid blue;
  width: 300px;
  height: 50%;
  position: absolute;
  left: 40%;
  top: 50%;
  display: flex;
}

.about-inner-grid-tag-container {
  height: 100%;
  border: 1px solid white;
  flex: 1;
}

<section id="about-section">
  <span class="about-tag personal-tag personal-tag1">Personal tag</span>
  <span class="about-tag personal-tag personal-tag2">Personal second</span>
  <span class="about-tag personal-tag personal-tag3">Personal third</span>
  <span class="about-tag personal-tag personal-tag4">Personal tag</span>
  <span class="about-tag personal-tag personal-tag5">Personal tag</span>

  <div id="about-inner-grid-wrap">
    <div class="about-inner-grid-tag-container about-personal-container">
    </div>
</section>

如您所见，当容器悬停时，我仅能获得一个以像素为单位的日志。我该如何简单地在每个“个人标签”的最高位置添加50％？

Answer 1

使用calc

const aboutTags = Array.from(document.querySelectorAll(".about-tag"));

document.querySelector(".about-personal-container").addEventListener("mouseover", function() {

  const filteredTags = aboutTags.filter(tag => tag.classList.contains("personal-tag"))

  const getTagPosition = filteredTags.map(tags => tags.style.top = tagPosition = 'calc('+window.getComputedStyle(tags).getPropertyValue('top')+' + 50%)');

  console.log(getTagPosition)
  //This gives the element top position but in pixels
});

#about-section {
  background: black;
  height: 100vh;
  position: relative;
  color: white;
}

.personal-tag {
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 10px;
  transition: all 1s;
}

.personal-tag1 {
  top: 5%;
  left: 15%;
}

.personal-tag2 {
  top: 15%;
  left: 35%
}

.personal-tag3 {
  top: 25%;
  left: 65%
}

#about-inner-grid-wrap {
  border: 1px solid blue;
  width: 300px;
  height: 50%;
  position: absolute;
  left: 40%;
  top: 50%;
  display: flex;
}

.about-inner-grid-tag-container {
  height: 100%;
  border: 1px solid white;
  flex: 1;
}

<section id="about-section">
  <span class="about-tag personal-tag personal-tag1">Personal tag</span>
  <span class="about-tag personal-tag personal-tag2">Personal second</span>
  <span class="about-tag personal-tag personal-tag3">Personal third</span>
  <span class="about-tag personal-tag personal-tag4">Personal tag</span>
  <span class="about-tag personal-tag personal-tag5">Personal tag</span>

  <div id="about-inner-grid-wrap">
    <div class="about-inner-grid-tag-container about-personal-container">
    </div>
</section>