javascript - JS 获取元素的顶部位置值，然后为其添加百分比

Question

我正在尝试创建一个函数，将 Array 元素的“顶部”值添加 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>