Выясните, если высота HTML устанавливается по стилю или по содержанию

Question

У меня 2 дивы:

<div id="div1"></div> 
<div id="div2">div2</div>​ 

в моем CSS:

#div1{ height:20px}​ 

Обе дивы имеют 20px высоту, проверьте demo
Как могу ли я узнать, имеет ли div высоту из-за содержимого или был установлен в css или встроенном стиле?
Это помогает мне узнать размеры, заданные разработчиком или только что рассчитанные браузером.

Answer 1

Я нашел способ ее достижения :)

function getRealHeight(element){ 
    var height=0; 
    if (element.children().length>0){ 
     var temp = $('<div></div>'); 
     temp.append(element.children()); 
     height = element.height(); 
     element.append(temp.children()); 
    } else { 
     var html=element.html(); 
     element.html(''); 
     height = element.height(); 
     element.html(html); 
    } 
    return height; 
} 

DEMO

Answer 2

Вы можете использовать jQuery для поиска значения высоты CSS и сравнения этого?

Answer 3

<div id="div-styled" style="height: 20px"></div> 
<div id="div-unstyled"></div> 

Проверка на инлайн CSS height свойство с простым JavaScript

document.getElementById('div-styled').style.height // "20px" 
document.getElementById('div-unstyled').style.height.length // 0 

---

Update

JQuery возвращает правила стиля из внешних таблиц стилей, а также с .css()

var $el = $('#container'); 
 
$el.html($el.css('height'));

#container { 
 
    height: 42px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="container"></div>

Answer 4

Используйте эту функцию:

function emptyHeight (elem) { 
    var $temp = $('<div />'); 
    var $elem = $(elem); 
    var height; 

    $temp.append($elem.contents()); 
    height = $elem.height(); 
    $elem.append($temp.contents()); 

    return height; 
} 

Идея состоит в том, чтобы временно отделить все дочерние узлы от элемента. Элемент без детей имеет высоту 0, , если только его высота не установлена ​​с помощью CSS.

Передайте свой элемент DIV в эту функцию. Если он возвращает 0, это означает, что DIV делает , а не, его высота устанавливается через CSS.

if (emptyHeight(yourDiv) === 0) { 
    // the DIV does not have any height value set via CSS 
} else { 
    // the DIV has a CSS height set 
}