Question

Here is a simple text on a web site, I would like to know what is the My First Heading length and height in how many pixel and at which position… How can I detect it via javascript? Thanks.

Answer 1

you can create a temporary h1 element with display: inline style… and than get the offsetWidth.
try this:

<script type="text/javascript">
    var domId = 'dom-id' + Math.random();
    var temp = document.createElement('div');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(temp);
    var text = document.getElementsByTagName('h1')[0].innerHTML;
    var width = null;
    var tempH1 = null;

    temp.innerHTML = '<h1 style="display: inline" id="' + domId + '">' + text + '</h1>';

    tempH1 = document.getElementById(domId);
    width = tempH1.offsetWidth;
    body.removeChild(temp);

    alert(width);
</script>