How to Retrieve an HTML Element'S Actual Width and Height

How do I retrieve an HTML element's actual width and height?

You should use the .offsetWidth and .offsetHeight properties.
Note they belong to the element, not .style.

var width = document.getElementById('foo').offsetWidth;

The .getBoundingClientRect() function returns the dimensions and location of the element as floating-point numbers after performing CSS transforms.

> console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

How to get Current HTML element height and width property in javascript function

The problem with your attempt is that unlike regular HTML event attributes like onclick, ngClass and similar have different context of invocation. To be exact this points to current scope object.

In your case you should write a custom directive to read/operate with DOM element. For example simple directive can look like:

app.directive('dimentionClass', function() {
    return {
        link: function(scope, element) {
            var img = element[0];
            img.onload = function() {
                img.className = img.width > img.height ? 'landscape' : 'portrait';
            }
        }
    };
});

and you will use it like this:

<img ng-src="{{album.thumbnail.image_path}}" dimention-class />

Demo: http://plnkr.co/edit/GtklqTUvtbFxb6AFuz4S?p=preview

How to get the actual width and height of the root node in html?

You can use offsetWidth and offsetHeight

<html>
    <head> 
        <meta charset="utf-8" /> 
        <title>test</title> 
    </head> 
    <body style="background-color: red;width: 100vw;height: 100vh">
        <div id="123"></div>  
        <script>
            window.onresize = function() {
                document.getElementById("123").innerHTML = document.getElementsByTagName('html')[0].offsetWidth + 'x' + document.getElementsByTagName('html')[0].offsetHeight;
            }
        </script> 
    </body>
</html>

How to find an html element x,y,width or height without visibly rendering an html string

What you could do is to render the element behind the body. Make sure to apply a background color to the html element as mentioned here. Once you've rendered the element where the users can't see it, you can then grab all the stuff you need.

$(document).ready(function() {  console.log("Width: " + $("#child").css("width"));  console.log("Height: " + $("#child").css("height"));  console.log("Left: " + $("#child").css("left"));  console.log("Top: " + $("#child").css("top"));});

html {   background-color: white;}
body {  background: #dadada;  height: 100vh;}#child {  width: 100px;  height: 100px;  background: yellow;  position: relative;  left: 65px;  top: 50px;  z-index: -1;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="child">This should be hidden</div>

How to get the real width and height of element after rotating it?

One option would be to clone the second div with cloneNode and then remove the tranform style to get it's original dimensions, please see snippet.

    let div1 = document.getElementById('one');
    let div2 = document.getElementById('two');
    //clone the rotated div and then remove the transform style
    //this will give you it's original dimensions
    let div3 = div2.cloneNode(false);
    div3.style.transform = "none";
    //hide the clone
    div3.style.visibility = "hidden";
    //append to the body
    document.body.append(div3);
    
    console.log(div3.getBoundingClientRect());
    
    //remove clone from the DOM
    div3.remove();
    // Here the width and height is 50 and 80
    console.log(div1.getBoundingClientRect());

    // Here because i used transform rotate the width is 86 and height 94
    console.log(div2.getBoundingClientRect());

div#one {
      width: 50px;
      height: 80px;
      background-color: red;
    }

    div#two {
      width: 50px;
      height: 80px;
      background-color: red;
      transform: rotate(35deg);
    }

<div id="one"></div>
    <br/>
    <div id="two"></div>