Question

Thanks for looking into this.
Basically, what I am trying to do is to get the height of a div (which is set to 100% in my style.css, so it should be resizable on any device hopefully) so that I could print numbers 1-whatever number.

So for example if the window is small it’d print out the numbers 1-45, if it’s a smartphone browser, then the numbers will scale down to 1-10.

at the moment that’s what it looks like:

<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-->

I understand the height var calculation is wrong but I hope you understand the logic: Got the height of the div and given that padding for every

(every printed number) is 5px and the height of the font of every number, I can divide the height by the font size+10px (upper and lower padding).
When I try to print out the div_height variable nothing happens and I am a bit confused.

Thank you for taking time, again.

blagie-bla

Answer 1

It looks like you got what you came for, but here’s a heads-up to supplement the answers above: Consider using element.style.lineHeight instead of element.style.fontSize, as only the former multiplied by the number of lines will give you the actual height of the div, (or an accurate line-count given height \ line-height).