获得<li>元素高度，不包括后代

Question

给出： v-if="alunos.length" 我想获取第一个 <li>I want this height <ul> <li>but not this height</li> </ul> </li> 元素的高度，但不包括后代<li>的内容。

<ul><li>...，offsetHeight，clientHeight等都给出整个外部scrollHeight元素的高度。

Answer 1

您可以分别提取LI和UL的高度，然后将其减去以获得仅LI的高度。

使用jQuery库可以做到，

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

使用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

  

输出

     

完整LI高度= 42-UL高度= 22-仅LI高度= 20