Comment obtenez-vous la hauteur rendue d'un élément?

Comment obtenez-vous la hauteur rendue d'un élément?

Disons que vous avez un <div>élément avec du contenu à l'intérieur. Ce contenu à l'intérieur va étirer la hauteur du <div>. Comment obtenir la hauteur "rendue" lorsque vous n'avez pas explicitement défini la hauteur. Évidemment, j'ai essayé:

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

Y a-t-il une astuce pour le faire? J'utilise jQuery si cela aide.

Ça devrait être

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

avec jQuery. Cela récupère la hauteur du premier élément de l'ensemble encapsulé sous forme de nombre.

Essayer d'utiliser

.style.height

ne fonctionne que si vous avez défini la propriété en premier lieu. Pas très utile!

Essayez l'un des:

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

clientHeight comprend la hauteur et le rembourrage vertical.

offsetHeight inclut la hauteur, le rembourrage vertical et les bordures verticales.

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

NON JQUERY car il y avait un tas de liens utilisant elem.style.heighten 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 l'une de mes références préférées: http://youmightnotneedjquery.com/

Vous pouvez utiliser .outerHeight() à cette fin.

Il vous donnera la hauteur de rendu totale de l'élément. De plus, vous n'avez besoin de définir aucun css-heightélément. Par mesure de précaution, vous pouvez conserver sa hauteur automatiquement afin qu'elle puisse être rendue selon la hauteur du contenu.

//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 une vue claire de ces fonctions, vous pouvez aller sur le site de jQuery ou un article détaillé ici .

cela effacera la différence entre .height()/ innerHeight()/outerHeight()

J'utilise ceci pour obtenir la hauteur d'un élément (retourne float) :

document.getElementById('someDiv').getBoundingClientRect().height

Cela fonctionne également lorsque vous utilisez le DOM virtuel . Je l'utilise dans Vue comme ceci:

this.$refs['some-ref'].getBoundingClientRect().height

style = window.getComputedStyle(your_element);

puis simplement: style.height

Certainement utiliser

$('#someDiv').height()   // to read it

ou

$('#someDiv').height(newHeight)  // to set it

Je poste ceci comme une réponse supplémentaire car il y a quelques choses importantes que je viens d'apprendre.

Je suis presque tombé dans le piège en ce moment d'utiliser offsetHeight. C'est ce qui s'est passé :

• J'ai utilisé la bonne vieille astuce consistant à utiliser un débogueur pour «surveiller» les propriétés de mon élément
• J'ai vu lequel a une valeur proche de la valeur que j'attendais
• C'était offsetHeight - donc je l'ai utilisé.
• Ensuite, j'ai réalisé que cela ne fonctionnait pas avec une DIV cachée
• J'ai essayé de me cacher après avoir calculé maxHeight mais cela avait l'air maladroit - je me suis trompé.
• J'ai fait une recherche - découvert jQuery.height () - et l'ai utilisé
• découvert que height () fonctionne même sur les éléments cachés
• juste pour le plaisir j'ai vérifié l'implémentation jQuery de hauteur / largeur

En voici juste une partie:

Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
) 

Oui, il regarde les deux défilement et décalage. Si cela échoue, il regarde encore plus loin, en tenant compte des problèmes de compatibilité du navigateur et du CSS. En d'autres termes STUFF I DONT CARE ABOUT - or want to.

Mais je n'ai pas à le faire. Merci jQuery!

Morale de l'histoire: si jQuery a une méthode pour quelque chose, c'est probablement pour une bonne raison, probablement liée à la compatibilité.

Si vous n'avez pas lu la liste des méthodes jQuery récemment, je vous suggère de jeter un œil.

document.querySelector('.project_list_div').offsetHeight;

J'ai créé un code simple qui n'a même pas besoin de JQuery et qui va probablement aider certaines personnes. Il obtient la hauteur totale de 'ID1' après le chargement et l'utilise sur 'ID2'

function anyName(){
    var varname=document.getElementById('ID1').offsetHeight;
    document.getElementById('ID2').style.height=varname+'px';
}

Il suffit ensuite de régler le corps pour le charger

<body onload='anyName()'>

Hm nous pouvons obtenir la géométrie de l'élément ...

var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);

Et ce simple JS?

Je pense que la meilleure façon de le faire en 2020 est d'utiliser des js simples et getBoundingClientRect().height;

Voici un exemple

let div = document.querySelector('div');
let divHeight = div.getBoundingClientRect().height;

console.log(`Div Height: ${divHeight}`);

<div>
  How high am I? 🥴
</div>

En plus de heightcette façon, nous avons également accès à un tas d'autres choses sur le div.

let div = document.querySelector('div');
let divInfo = div.getBoundingClientRect();

console.log(divInfo);

<div>What else am I? 🥴</div>

Est-ce donc la réponse?

"Si vous devez calculer quelque chose sans le montrer, définissez l'élément sur visibility:hiddenetposition:absolute ajoutez-le à l'arborescence DOM, récupérez l'offsetHeight et supprimez-le. (C'est ce que fait la bibliothèque de prototypes derrière les lignes la dernière fois que j'ai vérifié)."

J'ai le même problème sur un certain nombre d'éléments. Il n'y a pas de jQuery ou de Prototype à utiliser sur le site mais je suis tout à fait d'accord pour emprunter la technique si ça marche. Comme exemple de certaines choses qui n'ont pas fonctionné, suivies de ce qui a fonctionné, j'ai le code suivant:

// Layout Height Get
function fnElementHeightMaxGet(DoScroll, DoBase, elementPassed, elementHeightDefault)
{
    var DoOffset = true;
    if (!elementPassed) { return 0; }
    if (!elementPassed.style) { return 0; }
    var thisHeight = 0;
    var heightBase = parseInt(elementPassed.style.height);
    var heightOffset = parseInt(elementPassed.offsetHeight);
    var heightScroll = parseInt(elementPassed.scrollHeight);
    var heightClient = parseInt(elementPassed.clientHeight);
    var heightNode = 0;
    var heightRects = 0;
    //
    if (DoBase) {
        if (heightBase > thisHeight) { thisHeight = heightBase; }
    }
    if (DoOffset) {
        if (heightOffset > thisHeight) { thisHeight = heightOffset; }
    }
    if (DoScroll) {
        if (heightScroll > thisHeight) { thisHeight = heightScroll; }
    }
    //
    if (thisHeight == 0) { thisHeight = heightClient; }
    //
    if (thisHeight == 0) { 
        // Dom Add:
        // all else failed so use the protype approach...
        var elBodyTempContainer = document.getElementById('BodyTempContainer');
        elBodyTempContainer.appendChild(elementPassed);
        heightNode = elBodyTempContainer.childNodes[0].offsetHeight;
        elBodyTempContainer.removeChild(elementPassed);
        if (heightNode > thisHeight) { thisHeight = heightNode; }
        //
        // Bounding Rect:
        // Or this approach...
        var clientRects = elementPassed.getClientRects();
        heightRects = clientRects.height;
        if (heightRects > thisHeight) { thisHeight = heightRects; }
    }
    //
    // Default height not appropriate here
    // if (thisHeight == 0) { thisHeight = elementHeightDefault; }
    if (thisHeight > 3000) {
        // ERROR
        thisHeight = 3000;
    }
    return thisHeight;
}

qui essaie tout et n'importe quoi pour obtenir un résultat nul. ClientHeight sans effet. Avec les éléments problématiques, je reçois généralement NaN dans la base et zéro dans les hauteurs de décalage et de défilement. J'ai ensuite essayé la solution Ajouter DOM et clientRects pour voir si cela fonctionne ici.

29 juin 2011, j'ai en effet mis à jour le code pour essayer à la fois d'ajouter à DOM et clientHeight avec de meilleurs résultats que ce à quoi je m'attendais.

1) clientHeight était également égal à 0.

2) Dom m'a en fait donné une hauteur qui était super.

3) ClientRects renvoie un résultat presque identique à la technique DOM.

Étant donné que les éléments ajoutés sont de nature fluide, lorsqu'ils sont ajoutés à un élément DOM Temp autrement vide, ils sont rendus en fonction de la largeur de ce conteneur. Cela devient bizarre, car c'est 30 pixels plus court qu'il ne finit par le faire.

J'ai ajouté quelques instantanés pour illustrer comment la hauteur est calculée différemment.

Les différences de hauteur sont évidentes. Je pourrais certainement ajouter un positionnement absolu et caché mais je suis sûr que cela n'aura aucun effet. J'ai continué à être convaincu que cela ne fonctionnerait pas!

(Je m'éloigne davantage) La hauteur sort (rend) plus bas que la vraie hauteur rendue. Cela pourrait être résolu en définissant la largeur de l'élément DOM Temp pour qu'il corresponde au parent existant et pourrait être fait assez précisément en théorie. Je ne sais pas non plus ce qui résulterait de leur suppression et de leur ajout à leur emplacement actuel. Comme ils sont arrivés par une technique innerHTML, je chercherai à utiliser cette approche différente.

* CEPENDANT * Rien de tout cela n'était nécessaire. En fait, cela a fonctionné comme annoncé et a retourné la bonne hauteur !!!

Quand j'ai été en mesure de rendre les menus à nouveau incroyablement visibles, DOM avait renvoyé la bonne hauteur selon la disposition fluide en haut de la page (279 px). Le code ci-dessus utilise également getClientRects qui retourne 280 px.

Ceci est illustré dans l'instantané suivant (extrait de Chrome une fois qu'il a fonctionné.)

Maintenant, je n'ai aucune idée de pourquoi ce truc de prototype fonctionne, mais il semble que ce soit le cas. Alternativement, getClientRects fonctionne également.

Je soupçonne que la cause de tous ces problèmes avec ces éléments particuliers était l'utilisation de innerHTML au lieu d'appendChild, mais c'est de la pure spéculation à ce stade.

offsetHeight, d'habitude.

Si vous devez calculer quelque chose mais ne pas l'afficher, définissez l'élément sur visibility:hiddenet position:absolute, ajoutez-le à l'arborescence DOM, récupérez le offsetHeightet supprimez-le. (C'est ce que fait la bibliothèque de prototypes en arrière-plan la dernière fois que j'ai vérifié).

Parfois, offsetHeight retournera zéro parce que l'élément que vous avez créé n'a pas encore été rendu dans le Dom. J'ai écrit cette fonction pour de telles circonstances:

function getHeight(element)
{
    var e = element.cloneNode(true);
    e.style.visibility = "hidden";
    document.body.appendChild(e);
    var height = e.offsetHeight + 0;
    document.body.removeChild(e);
    e.style.visibility = "visible";
    return height;
}

Si vous utilisez déjà jQuery, votre meilleur pari est .outerHeight()ou .height(), comme cela a été indiqué.

Sans jQuery, vous pouvez vérifier le dimensionnement de la boîte en cours d'utilisation et ajouter divers rembourrages + bordures + clientHeight, ou vous pouvez utiliser getComputedStyle :

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

h sera maintenant une chaîne comme un "53.825px".

Et je ne trouve pas la référence, mais je pense que j'ai entendu dire que cela getComputedStyle()peut coûter cher, donc ce n'est probablement pas quelque chose que vous voulez appeler à chaque window.onscrollévénement (mais alors, jQuery ne l'est pas non plus height()).

Avec MooTools :

$('someDiv').getSize().y

Si j'ai bien compris votre question, alors peut-être que quelque chose comme ça aiderait:

function testDistance(node1, node2) {
    /* get top position of node 1 */
    let n1Pos = node1.offsetTop;
    /* get height of node 1 */
    let n1Height = node1.clientHeight;
    /* get top position of node 2 */
    let n2Pos = node2.offsetTop;
    /* get height of node 2 */
    let n2Height = node2.clientHeight;

    /* add height of both nodes */
    let heightTogether = n1Height + n2Height;
    /* calculate distance from top of node 1 to bottom of node 2 */
    let actualDistance = (n2Pos + n2Height) - n1Pos;

    /* if the distance between top of node 1 and bottom of node 2
       is bigger than their heights combined, than there is something between them */
    if (actualDistance > heightTogether) {
        /* do something here if they are not together */
        console.log('they are not together');
    } else {
        /* do something here if they are together */
        console.log('together');
    } 
}

Avez-vous défini la hauteur dans le CSS spécifiquement? Si vous ne l'avez pas, vous devez utiliser offsetHeight;plutôt queheight

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