How do I get the rotation of degree with getBoundingClientRect?

In my game, you can click on the orange box (it's supposed to represent a monster). Upon clicking, a green line will be appended to the characters div. For example for a better explanation:

This is the code I'm using to generate the line:

l = document.createElement('div');
l.innerHTML='<div id="oLineBar" style="  transform: rotate(' + RANDOM + 'deg);" class="fadeIn2"><div id="lineBar" class="lineBarCharacter"></div></div>';
character.appendChild(l);

And the CSS for that is:

.lineBarCharacter{
    height: 321px;
    width: 2px;
    background: rgba(39, 182, 0, 0.46)
}

#oLineBar {
    position: absolute;
    top: 20px;
    left: 37px;
    opacity: 1;
    transition: transform 1s linear;
    transform-origin: top left;
    transform-style: preserve-3D;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    -ms-transition-property: opacity, -ms-transform;
}

Now, I'm getting that orange boxes getboundingClientRect here:

ClientRect {height: 95, width: 88, left: 1250.5, bottom: 471, right: 1338.5…}bottom: 471height: 95left: 1250.5right: 1338.5top: 376width: 88

How do I determine the correct rotational degree, based upon where that orange box is located at (from the getboundingClientRect data)?

Not just that specific orange box, but any data that is retrieved from getBoundingClientRect. If that makes sense.. I'm a bit lost, sorry in advance if this is confusing. I pretty much want that line to go into the same direction as where that orange box is.