Comment puis-je obtenir la hauteur de la div qui inclut la zone coupée de la div ?
<div style="height: 20px; overflow: hidden">
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
</div>Vous ne pouvez pas le faire de cette façon, mais c'est possible en ajoutant un élément interne à votre conteneur, comme ceci :
<div id="element" style="height: 20px; overflow: hidden;">
<p id="innerElement"> <!-- notice this inner element -->
content<br />content<br />content<br />
content<br />content<br />content<br />
content<br />content<br />content<br />
</p>
</div>note en marge : Le fait de placer le contenu à l'intérieur des paragraphes est également une bonne pratique, et cet élément supplémentaire ne pose pas tant de problèmes que cela, si tant est qu'il en pose...
Et JavaScript :
var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);P.S. Pour que ce JavaScript fonctionne, placez-le après votre #element car le JavaScript ordinaire est exécuté avant que le DOM ne soit prêt s'il n'en reçoit pas l'instruction. Pour que cela fonctionne lorsque le DOM est prêt, vérifier ceci .
Mais je suggérerais d'obtenir jQuery Il vous sera utile plus tard si vous souhaitez étendre les opérations JavaScript dans votre site.
De plus, jQuery est le pouvoir pour de vrai !
Ainsi, il suffit d'ajouter ce script à votre <head /> (en supposant que vous ayez inclus jQuery) :
$(document).ready(function() {
var innerHeight = $('#innerElement').height();
alert(innerHeight);
});
Oui. Il semble que ce soit la meilleure façon de procéder. Je vous remercie. Oh et oui, j'adore jQuery. C'est une très belle bibliothèque.
Conseil : (je viens de le découvrir) si vous obtenez toujours 0 en retour de height ou offsetHeight, assurez-vous que vous avez configuré vos éléments pour qu'ils soient visibles avant de les mesurer.
Cela fonctionne dans tous les cas, qu'il s'agisse d'un nœud de texte ou d'un conteneur. Ceci utilise jquery, mais vous n'en avez pas besoin.
//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();$('#elem')[0] renvoie l'élément dom à partir de l'appel jquery. Vous pouvez donc l'utiliser sur n'importe quel élément dom en utilisant du simple javascript.
Voici une façon de réaliser ce que vous souhaitez, en utilisant l'idée de Fabian :
function GetHeight() {
var oDiv = document.getElementById("MyDiv");
var sOriginalOverflow = oDiv.style.overflow;
var sOriginalHeight = oDiv.style.height;
oDiv.style.overflow = "";
oDiv.style.height = "";
var height = oDiv.offsetHeight;
oDiv.style.height = sOriginalHeight;
oDiv.style.overflow = sOriginalOverflow;
alert("Real height is " + height);
}Démonstration en direct et cas d'essai : http://jsfiddle.net/yahavbr/7Lbz9/
Oui, cela conviendrait. J'espérais toutefois ne pas avoir à retirer le trop-plein avant de calculer la hauteur.
En fait, cela résout parfaitement mon problème, car la vitesse à laquelle le trop-plein est réglé/réinitialisé n'entraîne pas de défilement.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
3 votes
Pour ceux qui recherchent la meilleure approche, ignorez la réponse acceptée et essayez la réponse de @Colt.
2 votes
Sauf que cette réponse utilise jQuery, et que cette question ne portait pas sur jQuery.
0 votes
Je pense qu'il s'agit de l'utilisation de
scrollHeight... pas le jQuery