得到 元素高度不包括后代

问题描述 投票:0回答:1

鉴于: <li>I want this height <ul> <li>but not this height</li> </ul> </li> 我想得到第一个<li>元素的高度,不包括后代<ul><li>...内容。

offsetHeightclientHeightscrollHeight等都给出了整个外部<li>...</li>元素的高度。

html height html-lists element
1个回答
1
投票

您可以分别提取LIUL的高度,然后减去它以获得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

© www.soinside.com 2019 - 2024. All rights reserved.