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

Question

我正在尝试创建一个将 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% 添加到每个“个人标签”的顶部位置？

标签： javascriptcsscss-position

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>