MENU


Knowing Bounding Rectangle


RESETRUNFULL
Node.compareDocumentPosition() returns a bitmask of the following values:DOCUMENT_POSITION_DISCONNECTED: 1DOCUMENT_POSITION_PRECEDING: 2DOCUMENT_POSITION_FOLLOWING: 4DOCUMENT_POSITION_CONTAINS: 8DOCUMENT_POSITION_CONTAINED_BY: 16DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32

<!DOCTYPE html><html><head><style>p{
    height: 200px;
    overflow-y: scroll;
    border: 10px solid orange;
    padding: 10px;
    margin: 30px;}</style></head><body><p>Two engineers were standing at the base of a flagpole, looking at its top. A blonde walked by and asked what they were doing. "We're supposed to find the height of this flagpole," said Sven, "but we don't have a ladder." The woman took a wrench from her purse, loosened a couple of bolts, and laid the pole down on the ground. Then she took a tape measure from her handbag, took a measurement, and announced, "Twenty-one feet, six inches," and walked away. One engineer shook his head and laughed, "Typical blonde! We ask for the height and she gives us the length!"</p><pre></pre><script>
    var e = document.querySelector("p");
    onresize = ()=>{    // window.onresize =…
        var b = e.getBoundingClientRect();
        document.querySelector("pre").innerText =
            "clientHeight: "+ e.clientHeight + "\n"+
            "offsetHeight: "+ e.offsetHeight + "\n"+
            "scrollHeight: "+ e.scrollHeight + "\n"+
            "b.height: "+ b.height + "\n" +
            "b.top: "+ b.top + "\n" +
            "b.right: "+ b.right + "\n" +
            "body.compareDocumentPosition(e): " +
                     document.body.compareDocumentPosition(e);
    }</script></body></html>