check dimension width and height

check dimension width and height

by Adi Jaya

HTML

<h2 id="log">Widht :</h2>
<h2 id="log2">Height :</h2>

<p>
Lorem ipsum dolor sit amet, cum et elaboraret efficiendi temporibus, ne bonorum detracto nam, alia enim philosophia nec id. Splendide referrentur vituperatoribus vix ne, pericula explicari vim ei, in est eius aperiam. Vim agam fabulas mentitum ut, mucius nostrum maluisset ei ius. Cu alterum graecis quo.
</p>

<p>
Lorem ipsum dolor sit amet, cum et elaboraret efficiendi temporibus, ne bonorum detracto nam, alia enim philosophia nec id. Splendide referrentur vituperatoribus vix ne, pericula explicari vim ei, in est eius aperiam. Vim agam fabulas mentitum ut, mucius nostrum maluisset ei ius. Cu alterum graecis quo.
</p>

CSS

p,h2 {
    margin-bottom: 1rem;
}
h2 {
  font-weight : 500;
  font-size : 1.7rem;
}

JavaScript

function checkDimensions() {
    var sel = document.selection, range;
    var width = 0, height = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            width = range.boundingWidth;
            height = range.boundingHeight;
        }
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getBoundingClientRect) {
                var rect = range.getBoundingClientRect();
                width = rect.right - rect.left;
                height = rect.bottom - rect.top;
            }
        }
    }
    return { width: width , height: height };
}

//event
document.onmouseup = function() {
    var selectionDOC = checkDimensions();
    var a = selectionDOC.width;
    var b = selectionDOC.height;
    //test output
    document.getElementById("log").innerHTML = "Widht : " + a + "px";
    document.getElementById("log2").innerHTML = "Height : " + b + "px";
};