Découvrez si la hauteur HTML est définie par le style ou par le contenu.

Question

J'ai 2 divs :

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

dans mon css :

#div1{ height:20px}

Les deux divs ont une hauteur de 20px, vérifiez Démonstration
Comment puis-je savoir si la div a sa hauteur en raison du contenu ou si elle a été définie dans le style css ou inline ?
Cela m'aide à découvrir que les dimensions ont été définies par l'utilisateur. développeur ou simplement calculé par le navigateur.

Answer 1

Utilisez cette fonction :

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

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

    return height;   
}

L'idée est de détacher temporairement tous les nœuds enfants de l'élément. Un élément sans enfant a une hauteur de 0 , sauf si sa hauteur est définie via CSS.

Passez votre élément DIV dans cette fonction. Si elle renvoie 0 cela signifie que le DIV ne no sa hauteur est définie par le biais de CSS.

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

Answer 2

Vous pouvez utiliser jQuery pour rechercher la valeur de la hauteur CSS et la comparer ?

Answer 3

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

Vérifiez en ligne CSS height avec du simple JavaScript

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

---

Mise à jour

jQuery renvoie également les règles de style des feuilles de style externes avec .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>