получить <li>высоту элемента, исключая потомков

Question

Учитывая: <li>I want this height <ul> <li>but not this height</li> </ul> </li> Я хочу получить высоту первого <li> элемента, исключая потомок <ul><li>... содержимого.

offsetHeight, clientHeight, scrollHeight и т. Д. - все дают высоту всего внешнего <li>...</li> элемента.

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);

Рабочая демоверсия

Использование 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);

Рабочая демоверсия

выход

Полная высота LI = 42 - Высота UL = 22 - Высота только LI = 20