Узнайте, задана ли высота HTML по стилю или по содержанию

У меня есть 2 divs:

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

в моем css:

#div1{ height:20px}

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

Ответ 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

Ответ 2

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

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
}

Ответ 3

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

Ответ 4

<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

Обновление

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>