highlight html Element for screenshots

gistfile1.txt

function highlightElement(selector) {
    function createOverlay() {
        const overlayStyle = {
            position: 'fixed',
            width: 100,
            height: 100,
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0,0,0,0.5)',
            zIndex: 2,
            cursor: 'pointer',
        };

        const overlay = document.createElement("div");
        Object.entries(overlayStyle).forEach(([style, value]) => {
            overlay.style[style] = value;
        })

        return overlay;
    }

    const {top, right, left, bottom, height} = document.querySelector(selector).getBoundingClientRect();

    const overlayTop = createOverlay();
    overlayTop.style.height = top + 'px';

    const overlayBottom = createOverlay();
    overlayBottom.style.top = bottom + 'px';

    const overlayRight = createOverlay();

    overlayRight.style.top = top + 'px';
    overlayRight.style.height = height + 'px';
    overlayRight.style.width = left + 'px';

    const overlayLeft = createOverlay();


    overlayLeft.style.top = top + 'px';
    overlayLeft.style.height = height + 'px';
    overlayLeft.style.left = right + 'px';


    document.querySelector("body").appendChild(overlayTop);
    document.querySelector("body").appendChild(overlayBottom);
    document.querySelector("body").appendChild(overlayRight);
    document.querySelector("body").appendChild(overlayLeft);



}