🔸.boundingBox

browser ⟩ DOM ⟩ type ⟩ Element ⟩ boxes ⟩ Element+boxes ⟩ .boundingBox

size: (may be fractional)
- almost the same as .borderBox size (integer-valued).
- "box-sizing: border-box" size = (width, height) -> padding/border included.
- standard box model： size = content(width, height) + padding + border.
position: (.x, .y) or (.left, .top) relative to viewport.

👉 compare： .borderBox (a Rect relative to .offsetParent)

elem.showNote() - show note beside element.

const { log } = console;

// ⭐️ $all(): select all element
function $all(selector, parent = document) {
    return parent.querySelectorAll(selector);
}

// 🔸 elem.showMessageUnder()
Element.prototype.showMessageUnder = function(html, {
    timeout = 5,
    showRectInfo = true,
}={}) {

    // ⭐️ bounding rect 
    let rect = this.getBoundingClientRect();    
    log(rect);

    // create <div> element
    let div = document.createElement('div');
    
    // better to use a css class for the style here (⭐️ don't forget "px"!)
    div.style.cssText = `position: fixed; color: red; background: lightyellow; left: ${rect.left}px; top: ${rect.bottom}px; padding: 4px; border: solid black 1px; opacity: 0.7`;

    if (showRectInfo) {
        html += `<br><code>{x: ${rect.x.toFixed(0)}, y: ${rect.y.toFixed(0)}, width: ${rect.width.toFixed(0)}, height: ${rect.height.toFixed(0)}}</code>`;
    }

    div.innerHTML = html;
    document.body.append(div);        // add to the DOM tree
    
    if (timeout > 0) {
        setTimeout(() => div.remove(), timeout * 1000);    // remove from DOM
    }

    return div;
};


// click handler
document.onclick = (event) => {

    const tag = event.target.tagName;

    if (tag !== 'BUTTON') {
        log(`clicked on a <${tag}>`); return;
    }

    $all('span').forEach(span => {
        span.showMessageUnder(`bounding rect:`);    // 🔸 custom method
    });
};

Previous.offsetParent Nextelem.showNote()

Last updated 2 years ago

Was this helpful?