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 élément <div> avec du contenu à l'intérieur. Ce contenu à l'intérieur va étirer la hauteur du <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? Je suis à l'aide de jQuery si cela aide.
16 réponses
Il devrait juste être
$('#someDiv').height();
Avec jQuery. Cela récupère la hauteur du premier élément de l'ensemble enveloppé 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 éléments suivants:
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 comprend 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 comme il y avait un tas 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;
Extérieur HEIGHT:
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.
Il vous donnera la pleine hauteur rendue de l'élément. En outre, vous n'avez pas besoin de définir css-height de l'élément. Par précaution, vous pouvez garder sa hauteur auto 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 pour le site de jQuery ou un message détaillé ici.
, Il sera clairement le différence entre .height() / innerHeight() / outerHeight()
style = window.getComputedStyle(your_element);
Alors 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 parce qu'il y a quelques choses importantes que je viens d'apprendre.
J'ai failli tomber dans le piège d'utiliser offsetHeight. C'est ce qui s'est passé :
- j'ai utilisé le bon vieux truc d'utiliser un débogueur pour "regarder" quelles propriétés mon élément a
- j'ai vu lequel a une valeur autour de la valeur que j'attendais
- c'était offsetHeight-alors j'ai utilisé ça.
- puis 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 retrouvé dans un désordre.
- j'ai fait une recherche-découverte jQuery.height() - et l'a utilisé
- découvert hauteur() fonctionne même sur les éléments cachés
- juste pour le plaisir, j'ai vérifié l'implémentation jQuery de height / width
Voici juste une partie de celui-ci :
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 à la fois le défilement et le décalage. Si cela échoue il semble même en outre, en tenant compte des problèmes de compatibilité navigateur et css. En d'autres termes des choses que je ne me soucie pas - ou que vous voulez.
Mais je n'ai pas à le faire. Merci jQuery!
Morale de l'histoire : si jQuery est une méthode pour quelque chose, c'est probablement pour une bonne raison, probablement liées à la compatibilité.
Si vous n'avez pas lu la liste des méthodes jQuery récemment, je vous suggère de jeter un oeil.
J'ai fait 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';
}
Alors juste le corps pour le charger
<body onload='anyName()'>
Alors, est-ce la réponse?
"Si vous devez calculer quelque chose mais ne pas l'afficher, définissez l'élément sur visibility:hidden et position:absolute, ajoutez-le à L'arborescence DOM, obtenez le offsetHeight et supprimez-le. (C'est ce que la bibliothèque prototype fait 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 favorable à l'emprunt de la technique si cela fonctionne. Comme un exemple de certaines choses qui ont échoué à travail, suivi de ce qui a fait, 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 essentiellement tout et n'importe quoi seulement pour obtenir un résultat nul. ClientHeight sans effet. Avec les éléments de problème, j'obtiens 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 en effet 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 donné une taille qui était géniale.
3) ClientRects renvoie un résultat presque identique à la technique DOM.
Parce 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, parce que c'est 30px plus court qu'il finit par finir.
J'ai ajouté quelques instantanés pour illustrer comment la hauteur est calculé différemment.
Les différences de hauteur sont évidentes. Je pourrais certainement ajouter un positionnement absolu et caché, mais je suis sûr que n'aura aucun effet. J'ai continué à être convaincu que cela ne fonctionnerait pas!
(je digresse plus loin) la hauteur sort (rend) inférieure à la vraie hauteur rendue. Cela pourrait être résolu en définissant la largeur de L'élément DOM Temp pour correspondre au parent existant et pourrait être fait assez précisément en théorie. Je ne sais pas ce qui résulterait de les supprimer et de les ajouter à leur emplacement existant. Comme ils sont arrivés à travers une technique innerHTML je vais regarder en utilisant cette approche différente.
* cependant * rien de tout cela n'était nécessaire. En fait, il a travaillé comme annoncé et retourné la bonne hauteur!!!
Quand j'ai pu rendre les menus visibles à nouveau étonnamment DOM avait retourné la hauteur correcte par la mise en page fluide en haut de la page (279px). Le code ci-dessus utilise également getClientRects qui renvoie 280px.
Ceci est illustré dans l'instantané suivant (tiré de Chrome une fois opérationnel.)
Maintenant, je n'ai aucune idée de pourquoi ce truc prototype fonctionne, mais il semble. 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 de appendChild, mais c'est de la pure spéculation à ce stade.
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 ce js simple ?
offsetHeight, d'habitude.
Si vous devez calculer quelque chose mais ne pas l'afficher, définissez l'élément sur visibility:hidden et position:absolute, ajoutez-le à L'arborescence DOM, obtenez le offsetHeight et supprimez-le. (C'est ce que la bibliothèque prototype fait dans les coulisses 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 pari est .outerHeight() ou .height(), comme cela a été indiqué.
Sans jQuery, vous pouvez cocher la case de la taille en cours d'utilisation et d'ajouter divers rembourrages + bordures + clientHeight, ou, vous pouvez utiliser getComputedStyle:
Var h = getcomputedstyle (document.getElementById ('someDiv')).hauteur;
h sera maintenant une chaîne comme un "53.825 px".
Et je ne trouve pas la référence, mais je pense que j'ai entendu getComputedStyle() peut être cher, donc c'est probablement pas quelque chose que vous voulez appeler sur chaque événement window.onscroll (mais alors, jquery n'est pas non plus height()).
J'utilise ceci:
document.getElementById('someDiv').getBoundingClientRect().height
Avez-vous défini la hauteur dans le css spécifiquement? Si vous n'avez pas besoin d'utiliser offsetHeight; plutôt que height
var h = document.getElementById('someDiv').style.offsetHeight;