如何检查元素的位置？答案

【问题标题】：How to check the position of an element?如何检查元素的位置？
【发布时间】：2019-02-23 02:20:34
【问题描述】：

我有下面的脚本。基本上，它打破了带有标题的图片。问题是有时我在页面末尾有标题，而在下一页有图片。我希望能够测试标题是否在页面中很远，它将转到下一页。类似于“如果标题位置 > 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;
}

【问题讨论】：

嗨阿兰。 “下一页”是什么意思？您是否使用 HTML 来生成打印文档？
我建议您在继续使用 javascript 之前阅读 CSS 教程。 CSS 包含许多不同的规则来定位元素、指定最大宽度、空格应该在哪里中断等。这应该可以更容易地根据需要布局页面，而不是使用 JS 进行布局计算。
这可能会回答你的问题：stackoverflow.com/questions/9230727/…
嗨，克里斯，是的，我这样做了。我实际上在我们使用的软件中构建报告。我们使用 SQL 来获取布局的数据和 HTML/CSS/Javascript。

标签： javascript

【解决方案1】：

更新：抱歉，我以为您要求不要在视口下方扩展...要停止分页符，您可以使用 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

【讨论】：

实际上，我正在尝试相反的方法。我希望每个新标题都与图片保持一致，因为现在，在某些情况下，我会在页面底部看到标题，而在新页面上显示图片。
上面就是这样做的，它避免在div.title之后放置分页符
我已经尝试过了，但它不起作用。这是我在脚本中的行：document.writeln('' + value + '');
尝试使用旧版本：page-break-after: avoid。您的浏览器可能不支持新属性
也试图把它放在一个 div 中，但都不工作： document.writeln('
'); document.writeln(''); document.writeln('' + value + ''); document.writeln(''); document.writeln('
');