"。
我有一个问题，无法通过给定clientHeight在元素之前添加一个div paragraph。在这种情况下，我想从给定的clientHeight获取最接近的paragraph，并在该元素之后/之前添加一个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>
我想从 clientHeight 获取最近的<p> 30px然后添加一个div。
我该怎么做？
获取所有 P，并找到最接近的
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
}
}
将子项的偏移顶部与父项的偏移顶部进行比较
const addDividers = (el) => {
['beforebegin', 'afterend'].forEach(pos => {
const div = document.createElement('div');
div.textContent = 'DIVIDER';
el.insertAdjacentElement(pos, div);
});
}
const cont = document.getElementById('content'),
wanted = Array.from(cont.children).find(el => el.offsetTop >= cont.offsetTop+ 30 );
if (wanted) {
addDividers(wanted)
}<div id="content">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
</div>