Comment obtenez-vous la hauteur de rendu d'un élément?
Comment obtenez-vous la hauteur de rendu d'un élément?
Disons que vous avez un élément <div> avec du contenu à l'intérieur. Ce contenu à l'intérieur va étirer la hauteur de <div>. Comment obtenez-vous 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 un truc pour faire ça? J'utilise jQuery si cela aide.
Il devrait juste être
$('#someDiv').height();
avec jQuery. Cela récupère la hauteur du premier élément du jeu emballé 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 inclut 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 _ puisqu'il y avait beaucoup de liens utilisant elem.style.height en 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 une de mes références préférées: http://youmightnotneedjquery.com/
Vous pouvez utiliser .outerHeight() à cette fin.
Cela vous donnera la hauteur de rendu complète de l'élément. De plus, vous n'avez pas besoin de définir le css-height de l'élément. Par précaution, vous pouvez conserver sa hauteur auto afin de pouvoir la restituer en fonction de 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 sur un poste détaillé ici .
cela va effacer la différence entre .height()/innerHeight()/outerHeight()
style = window.getComputedStyle(your_element);
alors simplement: style.height
J'utilise ceci:
document.getElementById('someDiv').getBoundingClientRect().height
Cela fonctionne également lorsque vous utilisez le virtual DOM . Je l'utilise dans Vue comme ça:
this.$refs['some-ref'].getBoundingClientRect().height
Utiliser définitivement
$('#someDiv').height() // to read it
ou
$('#someDiv').height(newHeight) // to set it
Je publie 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 tout à l'heure d'utiliser offsetHeight. C'est ce qui s'est passé :
- J'ai utilisé le bon vieux truc d'utiliser un débogueur pour "regarder" les propriétés de mon élément
- J'ai vu lequel a une valeur proche de celle que j'attendais
- C'était offsetHeight - donc je l'ai utilisé.
- Puis j'ai réalisé que cela ne fonctionnait pas avec une DIV cachée
- J'ai essayé de me cacher après le calcul de maxHeight, mais cela semblait maladroit - je me suis retrouvé dans le pétrin.
- J'ai fait une recherche - découvert jQuery.height () - et l'ai utilisée
- découvert height () fonctionne même sur des é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])
)
Eh oui, il regarde à la fois défilement et décalage. Si cela échoue, la recherche prend encore en compte les problèmes de compatibilité des navigateurs et des CSS. En d'autres mots, je ne me soucie pas de - ou je ne le veux pas.
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 coup d'œil.
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 avoir été chargé et utilisé sur 'ID2'
function anyName(){
var varname=document.getElementById('ID1').offsetHeight;
document.getElementById('ID2').style.height=varname+'px';
}
Ensuite, il suffit de définir 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);
Que diriez-vous de cette plaine de JS?
Alors est-ce la réponse?
"Si vous devez calculer quelque chose mais ne pas le montrer, définissez l'élément sur visibility:hidden et position:absolute, ajoutez-le à l'arborescence DOM, récupérez offsetHeight et supprimez-le. . "
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 en faveur de l'emprunt de la technique si cela fonctionne. Comme exemple de certaines choses qui ont échoué, suivies de quoi, 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 fondamentalement 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 Add DOM et clientRects pour voir si cela fonctionne ici.
29 juin 2011, J'ai effectivement mis à jour le code pour essayer à la fois d'ajouter à DOM et clientHeight avec de meilleurs résultats que prévu.
1) clientHeight était également 0.
2) Dom m'a en fait donné une taille 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, ils sont restitués en fonction de la largeur de ce conteneur lorsqu'ils sont ajoutés à un élément DOM Temp par ailleurs vide. Cela devient étrange, parce que c'est 30px plus court que finalement.
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 plus loin) La hauteur sort (rend) inférieure à la vraie hauteur rendue. Pour résoudre ce problème, définissez la largeur de l'élément DOM Temp afin qu'elle corresponde au parent existant. Cette opération peut être effectuée assez précisément en théorie. Je ne sais pas non plus ce qui résulterait de leur suppression et de leur réinsertion dans leur emplacement actuel. Comme ils sont arrivés par une technique innerHTML, je vais utiliser cette approche différente.
* CEPENDANT * Rien de tout cela n'était nécessaire. En fait, cela a fonctionné comme annoncé et est retourné à la bonne hauteur !!!
Lorsque j’ai été capable de rendre les menus visibles à nouveau, étonnamment, DOM avait renvoyé la hauteur correcte par la disposition fluide en haut de la page (279 pixels). Le code ci-dessus utilise également getClientRects qui renvoie 280px.
Ceci est illustré dans l’instantané suivant (extrait de Chrome une fois opérationnel).
Maintenant, je n'ai aucune idée de pourquoi ce truc prototype fonctionne, mais il semble que. Sinon, getClientRects fonctionne également.
Je suppose que la cause de tous ces problèmes avec ces éléments particuliers est l’utilisation de innerHTML au lieu de appendChild, mais c’est là une pure spéculation.
offsetHeight, généralement.
Si vous devez calculer quelque chose mais ne pas le montrer, définissez l'élément sur visibility:hidden et position:absolute, ajoutez-le à l'arborescence DOM, obtenez la offsetHeight et supprimez-le. (C'est ce que le prototype fait en coulisse la dernière fois que j'ai vérifié).
Parfois, offsetHeight retournera zéro car 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 choix est .outerHeight() ou .height(), comme indiqué.
Sans jQuery, vous pouvez vérifier la taille de la boîte utilisée et ajouter divers rembourrages + bordures + clientHeight, ou, vous pouvez utiliser getComputedStyle :
var h = getComputedStyle (document.getElementById ('someDiv')). height;
h sera désormais une chaîne semblable à "53.825px".
Et je ne trouve pas la référence, mais je pense avoir entendu dire que getComputedStyle() peut être coûteux, ce n'est donc probablement pas quelque chose que vous voulez appeler à chaque événement window.onscroll (mais alors, ni height() de jQuery).
Avec MooTools:
$ ('someDiv'). getSize (). y
Si j'ai bien compris votre question, alors quelque chose comme ceci pourrait aider:
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');
}
}
document.querySelector('.project_list_div').offsetWidth;