Nsryjdtyk

Given:

<li>I want this height
<ul>
<li>but not this height</li>
</ul>
</li>

I want to get the height of the first <li> element, excluding the descendant <ul><li>... content.

offsetHeight, clientHeight, scrollHeight etc. all give the height of the entire outer <li>...</li> element.

You can extract height of LI and UL separately and then subtract it to get the height of LI only.

Using jQuery library it can be done as,

var liHeight = $('#test > li').outerHeight(); // Get First Li Height



var liUlHeight = $('#test li > ul').outerHeight(); // Get Height of First UL inside Li



var onlyliHeight = liHeight - liUlHeight;



alert('Full LI Height='+liHeight+' -- UL Height='+liUlHeight+' -- Only LI Height='+onlyliHeight);

Working Demo

Using Vanilla JavaScript,

var liHeight = document.querySelector('#test > li').offsetHeight; // Get First Li Height



var liUlHeight = document.querySelector('#test li > ul').offsetHeight; //Get Height of First UL inside Li



var onlyliHeight = liHeight - liUlHeight;



alert('Full LI Height='+liHeight+' -- UL Height='+liUlHeight+' -- Only LI Height='+onlyliHeight);

Working Demo

Output

Full LI Height=42 -- UL Height=22 -- Only LI Height=20