Comment voulez-vous obtenir le rendu de la hauteur d'un élément?

Comment voulez-vous obtenir le rendu de la hauteur d'un élément?

Disons que vous avez un <div> élément avec un contenu à l'intérieur. Ce contenu à l'intérieur est d'aller à l'étirement de la hauteur de la <div>. Comment voulez-vous obtenir le "rendu" de hauteur, lorsque vous n'avez pas explicitement défini la hauteur. Évidemment, j'ai essayé: 

var h = document.getElementById('someDiv').style.height;

Est-il un truc pour le faire? Je suis à l'aide de jQuery si cela aide.

InformationsquelleAutor BuddyJoe | 2009-02-08
  1. 163

    Il faut juste être

    $('#someDiv').height();

    avec jQuery. Cela permet de récupérer la hauteur du premier élément dans l'ensemble de fractionnement comme un nombre.

    En essayant d'utiliser

    .style.height

    ne fonctionne que si vous avez défini la propriété dans la première place. Pas très utile!

    • Un seul mot: génial! Merci pour la participation de tous. Beaucoup de bonnes infos sur ce fil. Cela me permettra au centre de pages à l'aide de CSS, mais l'utilisation de jQuery pour rendre l'ensemble de la hauteur de "conteneur" div correct sans s'aventurer dans le CSS hackville. Merci encore.
    • même si vous n'êtes PAS à l'aide de jQuery ou peut ou ne voulez pas, je vous suggère fortement la mise en œuvre de quelqu'un en utilisant juste offsetHeight va de l'avant et de télécharger les jQuery source et de recherches pour la "hauteur" pour trouver le code qu'ils utilisent. beaucoup de trucs de fou là-dedans !
    • Absolument d'accord avec le fait que Simon. Il est toujours judicieux d'étudier comment les bibliothèques Javascript accomplir une solution à un problème
    • Cette question et la réponse est plus de 5 ans. L'OP était déjà à l'aide de jQuery sur leur site, donc plutôt que de re-mettre en œuvre la même logique de lui/elle-même, pourquoi ne pas utiliser la fonction jQuery qui déjà n'est ce pas? Je serai d'accord que jQuery est trop pour beaucoup de choses, et je n'ai pas peur de la vanille JS, mais quand il y a une fonction dans une bibliothèque qui fait exactement ce dont vous avez besoin, il semble idiot de ne pas l'utiliser, notamment pour des raisons de "Pas Inventé Ici"
    • Ok c'est un bon point.. je voudrais ajouter qu'il ne vous aide pas (ou le hasard visiteur) apprendre ce qui se passe réellement dans les coulisses. Trop de réponses fournir une ligne 'jquery' solution que oui, œuvres, cependant il n'a pas d'éduquer quelqu'un, en termes de ce qui se passe avec le DOM et comment il fonctionne
    • L'OPs intention était de poser la question pour obtenir le rendu de la hauteur de l'élément, de ne pas comprendre ce qui se passe dans les DOM et en coulisses; si c'était leur intention, ils ont posé la mauvaise question. Je suis d'accord que les gens devraient être plus enclins à comprendre les bibliothèques et frameworks dont l'utilisation, la connaissance est le pouvoir et tout ça, mais parfois, on veut juste une réponse à une question spécifique. En effet, les commentaires ci-dessus le suggèrent déjà en regardant à travers le jQuery, le code pour comprendre ce qui se passe derrière les coulisses.
    • Pour l'OP, à l'aide de jQuery est une réponse valable. Pour le reste du monde voir ce à partir de là, la non-jQuery réponse est le meilleur. Peut-être doit DONC s'adapter à cette réalité, peut-être plus voté réponses doivent être mis en évidence dans certains cas bien plus que accepté ceux.

    InformationsquelleAutor Russ Cam
  2. 1087

    Essayez l'une de:

    var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

    clientHeight comprend la hauteur et de remplissage vertical.

    offsetHeight comprend la hauteur verticale de rembourrage, et des bordures verticales.

    scrollHeight comprend la hauteur du contenu du document (serait supérieure à la hauteur en cas de défilement), remplissage vertical, et des bordures verticales.

    • Merci, je ne connaissais pas cette propriété. C'est IE8+ compatible aussi.
    • Grand. Est-il travailler dans les anciens navigateur?
    • Je suis perplexe avec le sens de l'clientHeight. J'ai un élément div qui a un tas de p éléments et le contenu va bien au-delà de la zone d'affichage du navigateur vers le bas. Et je m'attendais à clientHeight pour donner le rendu de la hauteur, et scrollHeight de donner la pleine longueur. Mais ils sont presque égales ( seulement différente par les margin, padding, etc.) .
    • sauf s'il a lui-même une hauteur limitée et un overflow:hidden ou la forme de certains overflow:scroll, l'élément va s'agrandir (que ce soit dans votre point de vue ou pas) pour afficher tout le contenu et les scrollHeight et clientHeight seront égaux.
    • Grande réponse, mais logiquement, les frontières qui affectent la hauteur d'un élément sont le haut et le bas des frontières, qui sont à l'horizontale. Cette réponse fait référence à eux comme "vertical frontières." Juste pensé que je baisse mes 2 cents
    • De ce que je sais, .clientWidth/.clientHeight ne PAS inclure de défilement de la largeur si le défilement est affichée. Si vous souhaitez faire défiler la largeur de l'être, peut utiliser element.getBoundingClientRect().width au lieu

    InformationsquelleAutor strager
  3. 140

    NON JQUERY puisqu'il y avait un tas de liens à l'aide de elem.style.height dans le haut de ces réponses...

    HAUTEUR INTÉRIEURE:

    https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight 

    document.getElementById(id_attribute_value).clientHeight;

    HAUTEUR EXTÉRIEURE:

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

    document.getElementById(id_attribute_value).offsetHeight;

    Ou de l'un de mes préférés références: http://youmightnotneedjquery.com/

    • L'amour que de référence, basé sur ma propre lib sur celui-là!
    InformationsquelleAutor Jason Lydon
  4. 45

    Vous pouvez utiliser .outerHeight() à cette fin.

    Il vous donnera entière rendu hauteur de l'élément. Aussi, vous n'avez pas besoin de tout css-height de l'élément. Par précaution, vous pouvez garder sa hauteur auto de sorte qu'il peut être rendu que par le contenu de la hauteur.

    //if you need height of div excluding margin/padding/border
$('#someDiv').height();

//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();

//if you need height of div including padding and border
$('#someDiv').outerHeight();

//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);

    Pour avoir une vue claire de ces fonction, vous pouvez aller pour faire du jQuery site ou un détail de poster ici.

    il sera clairement le différence entre .height() /innerHeight() /outerHeight()

    • Merci. Dans le travail avec les chars, j'ai eu beaucoup de problèmes avec la hauteur de l'auto, mais n'avait pas l'expérience alors. En général, je n'ai pas été réglage de la hauteur, sauf dans certains complexes de mise en page de script où j'ai d'abord effacer le champ, mais il faut le même pour chaque bloc (Div) qui se termine par le même sommet. Même un pixel de différence entre les blocs vis de la mise en page lorsque le redimensionnement des fenêtres.
    • BTW, je pense que l'offset a certains navigateur dépendant de la version utilise concernant les marges que cela élimine.
    • Ce doit être la accepté de répondre à moi!
    • La question ne fait pas appel à jQuery. Ugh.
    • Je pense qu'il est clairement mentionné qu'il est à l'aide de jQuery.( également inclus dans les Balises ) 🙂
    InformationsquelleAutor open and free
  5. 27
    style = window.getComputedStyle(your_element);

    alors simplement: style.height

    • Cela devrait en fait être la accepté de répondre. Document de référence pour getComputedStyle() est ici
    InformationsquelleAutor Feiteira