Simple javascript function to draw rectangles around an element to focus on it

tutorial.js

var allrect, lrect, rrect, urect, brect, previousOverflow;

//Dividing divs. Left and right are biggest
//||--||
//||oo||
//||oo||
//||--||

function bound(id, margin){
    
    var rect = getBoundingRect(id);    
    
    lrect = drawRect(0,0,rect.left - margin,window.innerHeight);
    rrect = drawRect(rect.right + margin,0,window.innerWidth - rect.right,window.innerHeight);
    urect = drawRect(rect.left - margin,0,rect.width + margin*2,rect.top - margin);
    brect = drawRect(rect.left - margin,rect.bottom + margin,rect.width + margin*2, window.innerHeight - rect.bottom);
    
    previousOverflow = $("body").css("overflow");
    console.log(previousOverflow);
    $("body").css({overflow: "hidden"});
    $("body").append(lrect);
    $("body").append(brect);
    $("body").append(urect);
    $("body").append(rrect);
    
}

function unbound(){
    lrect.remove();
    rrect.remove();
    urect.remove();
    brect.remove();
    $("body").css({overflow: previousOverflow});
}

/**
 * 
 * @param {type} id
 * @returns {getRect.rect}
 */
function getBoundingRect(id){
    
    var element = document.getElementById(id);
    var rect = element.getBoundingClientRect();
    return rect;
    
}

function logRect(id){
    
    bound(id, 20);
    console.log(getBoundingRect(id));
    
}

function drawRect(x, y, w, h){
    
    var $div = $("<div>");
    $div.css(createRectStyle(x,y,w,h));
    return $div;
    
}

function createRectStyle(x, y, w, h){
    
    return {
        "background-color": "#999",
        position: "absolute",
        "z-index": 10000,
        top: y + "px",
        left: x + "px",
        width: w + "px",
        height: h + "px",
        opacity: 0.5
    };
    
}