javascript - 如何检查元素的位置？

Question

我有下面的脚本。基本上，它会破坏带有标题的图片。问题是有时我的标题在页面末尾，图片在下一页。 我希望能够测试标题是否在页面中太远，以至于它将转到下一页。 类似于“如果标题位置 > 3/4 页，则分页符。

谢谢。

function CheckTitle(value) {
    if(Title!=value) {
        if (column == 2) {
            document.writeln('</tr>');
            column = 1;
        }
        document.writeln('<tr>');
        document.writeln('<td colspan="35" width="1000px" style="background-color: rgba(0,159,227,1);color:white;font-size: larger">' + value + '</td>');
        document.writeln('</tr>');
    }
    Title = value;
    ctr=ctr+1;
}

Answer 1

更新:抱歉，我以为您要求不要延伸到视口(viewport)下方...要停止分页，您可以使用 CSS:

/* avoid page break after the div */
div.title {
    /* new property */
    break-after: avoid-page;

    /* legacy property */
    page-break-after: avoid;
}

引用:MDN | break-after - CSS