Javascript clientHauteur et alternatives

Question

J'essaye actuellement de modifier une fonction Javascript qui "glisse" dans un < div>. Le script tel qu'il est vous oblige à définir la hauteur de la div, donc il est généralement inutile dans < div> s dynamiquement rempli. J'ai trouvé du texte sur la propriété clientHeight en javascript, mais il semblerait qu'il ne supporte pas < div> s avec display réglé sur none (qui est la méthode utilisée pour faire glisser le div). Cela a du sens, car la hauteur de ce div dans la fenêtre du client n'est rien. Fondamentalement, je me demandais quelles autres méthodes vous connaissez tous, ou s'il y a un moyen de contourner le clientHeight = 0 lors de l'affichage: none.

Merci!

Oh, et voici la fonction que je utilise:

function getDivHeight(objName) { 
    return boxHeight = document.getElementById(objName).clientHeight; 
} 

Answer 1

Une solution simple est de définir sa visibilité à "caché" et il est affiché pour "bloquer" et de le mesurer.Cependant, certains navigateurs modernes parviendront à mettre à jour la mise en page pendant ce court laps de temps et vous obtiendrez un vilain scintillement. Le moyen le plus simple de surmonter cela est de placer l'élément dans un conteneur positionné de façon absolue avec le débordement réglé sur "caché".

Answer 2

Dans IE, vous pouvez essayer scrollHeight, mais je ne suis pas sûr si cela va fonctionner ou si elle est navigateur croix.

Answer 3

J'ai eu la chance de clonage l'élément, en le déplaçant hors-champ, puis l'afficher pour obtenir la hauteur du client:

var original = document.getElementById(some_id); 
var new_item = original.cloneNode(true); 
document.body.appendChild(new_item); // item already hidden, so it won't show yet. 
             // you may wish to validate it is hidden first 
new_item.style.position = "absolute"; 
new_item.style.left = "-1000px"; 
new_item.style.display = "block"; 
var height = new_item.clientHeight; 

EDIT: En regardant à travers le code jQuery, ils font exactement ce que suggère Tsvetomir Tsonev . jQuery définit temporairement le style sur "display: block; position: absolute; visibility: none", puis mesure la hauteur, en inversant les propriétés après la mesure. Donc, il semble que vous ayez à faire quelque chose de hackish, que ce soit le clonage du noeud ou le risque de scintillement dans certains navigateurs ... J'aime mieux la suggestion de Tsvetomir que mon bidouillage initial, au moins , n'implique pas de cloner un noeud dans le DOM dont vous n'avez pas besoin. Dans tous les cas, l'élément ne doit pas être réglé sur "display: none" pour mesurer sa hauteur. Le DOM n'est-il pas merveilleux? :-)

EDIT 2: également intéressant de noter que, après jQuery rassemble la hauteur, il ajoute les allocations pour le rembourrage, la marge et la taille frontière, de sorte que vous devrez peut-être aussi bien.

Answer 4

Oui, un élément qui n'est pas affiché sur la page n'a aucune dimension.

Cela a du sens. Considérez un élément qui a été créé et rempli avec un tas de texte, mais pas encore ajouté à l'arborescence du document. À quelle hauteur est-ce? Dépend de la taille de police. Quelle est la taille de la police? Dépend de l'endroit où le document est inséré dans le document; sa taille de police parent hériterait.

De même pour un élément avec "display: none". Ce n'est pas rendu, donc il n'a pas de dimensions. Ne pourrions-nous pas nous demander "quelle serait cette hauteur si elle était 'display: block'"? Il s'avère que non, parce que si était affiché, cela pourrait en soi changer les dimensions de son bloc parent, et alors la dimension des éléments affichés serait incompatible avec les dimensions des éléments non affichés!

La solution type consiste à désactiver "display: none", à mesurer la hauteur de l'élément, puis à rétablir immédiatement "display: none". Le navigateur ne sera pas redessiné au milieu d'un peu de JavaScript, donc vous ne verrez pas de scintillement sur la page.

Answer 5

Je vous ai répondu il y a longtemps, mais j'ai pensé que je devais partager cela car il est assez difficile d'obtenir la hauteur d'un tag div caché. heres ce que j'ai fait après avoir lu votre message, J'ai placé la div je veux glisser à l'intérieur d'un div 1px hauteur avec trop-plein réglé à caché. vous n'avez même pas besoin de définir l'affichage de la div interne à none car il est déjà là et si vous utilisez offsetHeight il devrait retourner la bonne hauteur pour tous les navigateurs et vous pouvez utiliser cette hauteur pour faire glisser votre div vers le haut.

PAIX !!!