Why Browser Is Returning Empty String on Style.Height ? How to Get Actual Height of an Element

Why browser is returning empty string on style.height ? How to get actual height of an element?

When you use this.style.height, the height must have been specified on the element first, like this:

<div style="height: 15px;" onclick="alert(this.style.height)">sometext</div>

Otherwise, you should probably use offsetHeight or clientHeight:

<div onclick="alert(this.offsetHeight)">sometext</div>

Unable to get height of node

You need to use clientHeight which is going to compute CSS height + CSS padding

Client Height JSFiddle Example

Docs

Setting the height on an element dynamically, in Javascript

Since the element hasn't had a height, you'll need to check the offsetHeight. Take a look at Why browser is returning empty string on style.height ? How to get actual height of an element?

Secondly, to set the height of the element, you should include px after 1500: elem.style.height = '1500px';.

An other option is to use: setAttribute('style', 'height:1500px');

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <style>
            #foo {
                border: 1px solid red;
            }
        </style>
        <div id="foo"></div>
        <div id="foobar"></div>
        <script>
            const elem = document.getElementById('foo');
            console.log('Element:' + elem);
            console.log(`Before: ${elem.offsetHeight}`);
            elem.style.height = '1500px';
            console.log(`After: ${elem.style.height}`);
        </script>
    </body>
</html>

WebElement getText() returning empty string even though element is visible

After much (much) troubleshooting it turned out that I had a slight mistake on my Xpath. From my html

<div id="QosDashboardPanel0" ...

I was not accounting for multiple tabs. In my AUT I was opening a new tab, not a new browser tab but a tab in the application itself, and the whole Hmtl would remain the same except the snippet above would change to

<div id="QosDashboardPanel1" ...

I was assuming that the ID wouldn't change, well lesson learned! This is why I was running into the 'not able to click an invisible element', the element was in fact there but it was hidden behind my active tab.

Not much of a solution but I hope if someone is running into something similar this at least points them in the correct direction or makes a bell go off.

Getting div height

Depending on the browser of choice, one of these will do:

mydiv.offsetHeight
mydiv.clientHeight

Get full height of a clipped DIV

Getting the height of a div

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,
}

Get div height with plain JavaScript

var clientHeight = document.getElementById('myDiv').clientHeight;

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight includes padding.

offsetHeight includes padding, scrollBar and borders.

Why Browser Is Returning Empty String on Style.Height ? How to Get Actual Height of an Element