javascript - 如何附加一个`` 选择之前/之后 ``给定clientHeight的元素？

Question

我在给定添加div之前paragraph元素时遇到问题clientHeight。在这种情况下，我想离paragraph给定最近并在该元素之后/之前clientHeight添加一个。div

这里的例子：

<div id="content">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <p>Paragraph 5</p>
</div>

我想<p>从30pxclientHeight 获取最近的，然后添加一个div.

我怎么能这样做？

标签： javascripthtmlvue.js

Answer 1

获取所有 Ps，并找到最接近的

let myPs = document.querySelectorAll("P");
if (myPs.length == 0) //handle this error case
else {
  var bestP, bestDist;
  bestP = myPs[0];
  bestDist = ... // calculate the minimum distance from either y or y + height to `clientHeight` for myPs[0]
  for (let i = 1; i < myPs.length; i++) {
    // compare distance as about to bestDist. If less, replace bestDist and bestP
  }
}