Получить значение верхней позиции элемента, а затем добавить процент к нему в JS - PullRequest
Новая
       9

Получить значение верхней позиции элемента, а затем добавить процент к нему в JS

0 голосов
/ 03 октября 2018

Я пытаюсь создать функцию, которая добавляет 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% к верхнему положению каждого «персонального тега»?

1 Ответ

0 голосов
/ 03 октября 2018

Использование 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>
...