javascript - 获取 div 的高度，但不是以像素为单位

Question

感谢您对此进行调查。 基本上，我想要做的是获取 div 的高度(在我的 style.css 中设置为 100%，因此它应该可以在任何设备上调整大小)，这样我就可以打印数字 1-任何数字。

例如，如果窗口很小，它会打印出数字 1-45，如果是智能手机浏览器，那么数字将缩小到 1-10。

目前看起来是这样的:

<div id="line_numbers">
        <script type="text/javascript">
            var i=0;
            var div_height=(document.getElementById('line_numbers').offsetHeight)/ getElementsByTagName("p").style.fontSize();

             while (i < div_height) { //if i is less that the height
                i++; //then increase its number
                document.write("<p>" + i + "</p>"); //and print out the number and new line (<p>)
            }
        </script><!--end of iteration script-->
</div><!--end of line numbers-->

我知道高度 var 计算是错误的，但我希望你能理解逻辑:得到 div 的高度并给定每个

(每个打印的数字)的填充是 5px 和每个数字的字体，我可以将高度除以字体大小+10px(上下填充)。 当我尝试打印出 div_height 变量时，没有任何反应，我有点困惑。

再次感谢您抽出宝贵时间。

蓝天白云

Answer 1

看起来你得到了你想要的，但这里有一个补充上面答案的提示:考虑使用 element.style.lineHeight 而不是 element.style.fontSize，因为只有前者乘以行数才能得到 div 的实际高度(或给定的准确行数 height\line-height).